mirror_html/tabler-icons
1
0
Fork 0
mirror of https://github.com/tabler/tabler-icons.git synced 2025-01-17 12:48:26 +01:00
Code Issues Releases Wiki Activity

icons

Browse Source
This commit is contained in:
codecalm 2020-02-28 13:23:23 +01:00
parent 3db680efcf
commit d96c9230b6
20 changed files with 153 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
Gemfile
View File

@ -3,3 +3,4 @@ source "https://rubygems.org"
git_source(:github) {|repo_name| "https://github.com/#{repo_name}" }
gem "jekyll", "~> 4.0"
gem "jekyll-last-modified-at"

5
Gemfile.lock
View File

@ -29,6 +29,9 @@ GEM
rouge (~> 3.0)
safe_yaml (~> 1.0)
terminal-table (~> 1.8)
jekyll-last-modified-at (1.2.1)
jekyll (>= 3.7, < 5.0)
posix-spawn (~> 0.3.9)
jekyll-sass-converter (2.1.0)
sassc (> 2.0.1, < 3.0)
jekyll-watch (2.2.1)
@ -43,6 +46,7 @@ GEM
mercenary (0.3.6)
pathutil (0.16.2)
forwardable-extended (~> 2.6)
posix-spawn (0.3.13)
public_suffix (4.0.3)
rb-fsevent (0.10.3)
rb-inotify (0.10.1)
@ -60,6 +64,7 @@ PLATFORMS
DEPENDENCIES
jekyll (~> 4.0)
jekyll-last-modified-at
BUNDLED WITH
1.17.3

3
_config.yml
View File

@ -1,3 +1,6 @@
plugins:
- jekyll-last-modified-at
exclude:
- .idea/*

5
_icons/activity.svg Normal file
View File

@ -0,0 +1,5 @@
---
---
<svg>
<polyline points="22 12 18 12 15 21 9 3 6 12 2 12" />
</svg>

7
_icons/alert-circle.svg Normal file
View File

@ -0,0 +1,7 @@
---
---
<svg>
<circle cx="12" cy="12" r="10"></circle>
<line x1="12" y1="8" x2="12" y2="12" />
<line x1="12" y1="16" x2="12.01" y2="16" />
</svg>

7
_icons/alert-octagon.svg Normal file
View File

@ -0,0 +1,7 @@
---
---
<svg>
<polygon points="8 2 16 2 22 8 22 16 16 22 8 22 2 16 2 8 8 2" />
<line x1="12" y1="8" x2="12" y2="12" />
<line x1="12" y1="16" x2="12.01" y2="16" />
</svg>

8
_icons/align-left.svg Normal file
View File

@ -0,0 +1,8 @@
---
---
<svg>
<line x1="3" y1="6" x2="21" y2="6" />
<line x1="3" y1="10" x2="15" y2="10" />
<line x1="3" y1="14" x2="21" y2="14" />
<line x1="3" y1="18" x2="17" y2="18" />
</svg>

8
_icons/align-right.svg Normal file
View File

@ -0,0 +1,8 @@
---
---
<svg>
<line x1="3" y1="6" x2="21" y2="6" />
<line x1="9" y1="10" x2="21" y2="10" />
<line x1="3" y1="14" x2="21" y2="14" />
<line x1="7" y1="18" x2="21" y2="18" />
</svg>

7
_icons/arrow-narrow-down.svg Normal file
View File

@ -0,0 +1,7 @@
---
---
<svg>
<line x1="12" y1="5" x2="12" y2="19" />
<line x1="16" y1="15" x2="12" y2="19" />
<line x1="8" y1="15" x2="12" y2="19" />
</svg>

7
_icons/arrow-narrow-left.svg Normal file
View File

@ -0,0 +1,7 @@
---
---
<svg>
<line x1="5" y1="12" x2="19" y2="12" />
<line x1="5" y1="12" x2="9" y2="16" />
<line x1="5" y1="12" x2="9" y2="8" />
</svg>

7
_icons/arrow-narrow-right.svg Normal file
View File

@ -0,0 +1,7 @@
---
---
<svg>
<line x1="5" y1="12" x2="19" y2="12" />
<line x1="15" y1="16" x2="19" y2="12" />
<line x1="15" y1="8" x2="19" y2="12" />
</svg>

7
_icons/arrow-narrow-up.svg Normal file
View File

@ -0,0 +1,7 @@
---
---
<svg>
<line x1="12" y1="5" x2="12" y2="19" />
<line x1="16" y1="9" x2="12" y2="5" />
<line x1="8" y1="9" x2="12" y2="5" />
</svg>

5
_icons/circle.svg Normal file
View File

@ -0,0 +1,5 @@
---
---
<svg>
<circle cx="12" cy="12" r="7"></circle>
</svg>

5
_icons/minus.svg Normal file
View File

@ -0,0 +1,5 @@
---
---
<svg>
<line x1="5" y1="12" x2="19" y2="12" />
</svg>

6
_icons/plus.svg Normal file
View File

@ -0,0 +1,6 @@
---
---
<svg>
<line x1="12" y1="5" x2="12" y2="19" />
<line x1="5" y1="12" x2="19" y2="12" />
</svg>

5
_icons/square.svg Normal file
View File

@ -0,0 +1,5 @@
---
---
<svg>
<rect x="5" y="5" width="14" height="14" rx="2" ry="2" />
</svg>

6
_icons/x.svg Normal file
View File

@ -0,0 +1,6 @@
---
---
<svg>
<line x1="18" y1="6" x2="6" y2="18" />
<line x1="6" y1="6" x2="18" y2="18" />
</svg>

8
assets/bg.svg
View File

@ -2,9 +2,9 @@
---
<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<g fill="none" fill-rule="evenodd" stroke="#206bc4" stroke-width=".025" opacity="1">
<rect x="4" y="1" width="16" height="22" rx="1.5"></rect>
<rect x="2" y="2" width="20" height="20" rx="1.5"></rect>
<rect x="1" y="4" width="22" height="16" rx="1.5"></rect>
<rect x="4" y="1" width="16" height="22" rx="3"></rect>
<rect x="2" y="2" width="20" height="20" rx="3"></rect>
<rect x="1" y="4" width="22" height="16" rx="3"></rect>
<circle cx="12" cy="12" r="5"></circle>
<circle cx="12" cy="12" r="11"></circle>
<line x1="0" y1="0" x2="24" y2="24"></line>
@ -13,6 +13,8 @@
<line x1="0" y1="15.5" x2="24" y2="15.5"></line>
<line x1="8.5" y1="0" x2="8.5" y2="24"></line>
<line x1="15.5" y1="0" x2="15.5" y2="24"></line>
<line x1="0" y1="12" x2="24" y2="12"></line>
<line x1="12" y1="0" x2="12" y2="24"></line>
</g>
<g font-family="system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji">
{% for i in (1..24) %}

7
assets/style.scss
View File

@ -69,6 +69,13 @@ a {
box-shadow: 0 0 0 1px rgba(0, 0, 0, .05), 0 1px 1px rgba(0, 0, 0, .1);
}
.icon-title {
font-size: 1.25rem;
line-height: 1;
margin: 0 0 3rem;
font-weight: 600;
}
.icon-preview-wrap {
position: relative;

59
index.html
View File

@ -10,14 +10,21 @@
<link rel="stylesheet" href="{{ site.baseurl }}/assets/style.css">
<title>Tabler Icons</title>
<style>
body {
display: none;
}
</style>
</head>
<body>
<div class="container">
<div class="box">
{% assign last-icon = site.icons | sort: date | reverse | first %}
{% capture last-icon %}
{% include icon.html name=last-icon.slug %}
{% assign first-icon = site.icons | reverse | first %}
{% assign slug = first-icon.slug %}
{% capture first-icon %}
{% include icon.html name=slug %}
{% endcapture %}
<div class="row mb js-icon-manager">
@ -25,47 +32,49 @@
<div class="icon-preview-wrap">
<div class="icon-preview">
{{ last-icon }}
{{ first-icon }}
</div>
</div>
</div>
<div class="col-aside">
<h1 class="icon-title js-icon-name">{{ slug }}</h1>
<div class="mb">
<button class="btn">
{{ last-icon }} Button
{{ first-icon }} Button
</button>
<button class="btn btn-icon">
{{ last-icon }}
{{ first-icon }}
</button>
<button class="btn btn-link">
{{ last-icon }} Button
{{ first-icon }} Button
</button>
</div>
<div class="input-icon mb">
<input type="text" class="input" value="Input value">
{{ last-icon }}
{{ first-icon }}
</div>
<div class="input-icon icon-left mb">
{{ last-icon }}
{{ first-icon }}
<input type="text" class="input" placeholder="Input placeholder">
</div>
<div class="mb">
<div class="avatar">{{ last-icon }}</div>
<div class="avatar avatar-sm">{{ last-icon }}</div>
<div class="avatar">{{ first-icon }}</div>
<div class="avatar avatar-sm">{{ first-icon }}</div>
</div>
<div class="tabs mb">
<a class="tab active">{{ last-icon }} Tab 1</a>
<a class="tab active">{{ first-icon }} Tab 1</a>
<a class="tab">Tab 2</a>
<a class="tab">Tab 3</a>
</div>
<div class="mb">
<a href="#">{{ last-icon }} Link</a>
<a href="#">{{ first-icon }} Link</a>
</div>
</div>
</div>
@ -74,8 +83,8 @@
<div>
<div class="icons-list">
{% for icon in site.icons %}
<a href="#" class="icons-list-icon js-icon" title="{{ icon.slug }}">
{% assign name = icon.slug %}
{% assign name = icon.slug %}
<a href="#" class="icons-list-icon js-icon" title="{{ icon.slug }}" data-icon="{{ name }}">
{% include icon.html name=name %}
</a>
{% endfor %}
@ -86,10 +95,26 @@
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script>
$(document).ready(function(){
$('body').on('click', '.js-icon', function(){
$(document).ready(function () {
$('body').on('click', '.js-icon', function (e) {
var icon = $(this).attr('data-icon');
$('.js-icon-name').html(icon);
localStorage.setItem('icon', icon);
$('.js-icon-manager svg').replaceWith($(this).find('>svg:eq(0)').clone());
e.preventDefault();
return false;
});
var icon = localStorage.getItem('icon');
if (icon) {
$('.js-icon[data-icon="' + icon + '"]').click();
}
document.body.style.display = "block"
});
</script>
</body>