mirror_html/tabler-icons
1
0
Fork 0
mirror of https://github.com/tabler/tabler-icons.git synced 2025-09-02 02:12:49 +02:00
Code Issues Releases Wiki Activity

icons

Browse Source
This commit is contained in:
codecalm
2020-02-29 16:31:01 +01:00
parent 4aef96b469
commit 131bf7d3bd
28 changed files with 204 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
_icons/activity.svg
View File

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

2
_icons/alert-circle.svg
View File

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

7
_icons/alert-octagon.svg
View File

@@ -1,7 +0,0 @@
---
---
<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-center.svg
View File

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

8
_icons/align-justified.svg
View File

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

8
_icons/align-left.svg
View File

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

8
_icons/align-right.svg
View File

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

6
_icons/arrow-down.svg
View File

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

6
_icons/arrow-left.svg
View File

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

6
_icons/arrow-narrow-down.svg
View File

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

7
_icons/border-all.svg Normal file
View File

@@ -0,0 +1,7 @@
---
---
<svg>
<rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
<line x1="3" y1="12" x2="21" y2="12"></line>
<line x1="12" y1="3" x2="12" y2="21"></line>
</svg>

12
_icons/border-bottom.svg Normal file
View File

@@ -0,0 +1,12 @@
---
---
<svg>
<line x1="21" y1="21" x2="3" y2="21"></line>
<g stroke-dasharray=".001 4.5">
<line x1="3" y1="3" x2="21" y2="3"></line>
<line x1="21" y1="3" x2="21" y2="21"></line>
<line x1="3" y1="21" x2="3" y2="3"></line>
<line x1="3" y1="12" x2="21" y2="12"></line>
<line x1="12" y1="3" x2="12" y2="21"></line>
</g>
</svg>

12
_icons/border-horizontal.svg Normal file
View File

@@ -0,0 +1,12 @@
---
---
<svg>
<line x1="3" y1="12" x2="21" y2="12"></line>
<g stroke-dasharray=".001 4.5">
<line x1="3" y1="3" x2="21" y2="3"></line>
<line x1="3" y1="21" x2="3" y2="3"></line>
<line x1="21" y1="21" x2="3" y2="21"></line>
<line x1="21" y1="3" x2="21" y2="21"></line>
<line x1="12" y1="3" x2="12" y2="21"></line>
</g>
</svg>

12
_icons/border-inner.svg Normal file
View File

@@ -0,0 +1,12 @@
---
---
<svg>
<line x1="3" y1="12" x2="21" y2="12"></line>
<line x1="12" y1="3" x2="12" y2="21"></line>
<g stroke-dasharray=".001 4.5">
<line x1="3" y1="3" x2="21" y2="3"></line>
<line x1="3" y1="21" x2="3" y2="3"></line>
<line x1="21" y1="21" x2="3" y2="21"></line>
<line x1="21" y1="3" x2="21" y2="21"></line>
</g>
</svg>

12
_icons/border-left.svg Normal file
View File

@@ -0,0 +1,12 @@
---
---
<svg>
<line x1="3" y1="21" x2="3" y2="3"></line>
<g stroke-dasharray=".001 4.5">
<line x1="3" y1="3" x2="21" y2="3"></line>
<line x1="21" y1="3" x2="21" y2="21"></line>
<line x1="21" y1="21" x2="3" y2="21"></line>
<line x1="3" y1="12" x2="21" y2="12"></line>
<line x1="12" y1="3" x2="12" y2="21"></line>
</g>
</svg>

12
_icons/border-none.svg Normal file
View File

@@ -0,0 +1,12 @@
---
---
<svg>
<g stroke-dasharray=".001 4.5">
<line x1="3" y1="3" x2="21" y2="3"></line>
<line x1="21" y1="3" x2="21" y2="21"></line>
<line x1="21" y1="21" x2="3" y2="21"></line>
<line x1="3" y1="21" x2="3" y2="3"></line>
<line x1="3" y1="12" x2="21" y2="12"></line>
<line x1="12" y1="3" x2="12" y2="21"></line>
</g>
</svg>

9
_icons/border-outer.svg Normal file
View File

@@ -0,0 +1,9 @@
---
---
<svg>
<rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
<g stroke-dasharray=".001 4.5">
<line x1="3" y1="12" x2="21" y2="12"></line>
<line x1="12" y1="3" x2="12" y2="21"></line>
</g>
</svg>

12
_icons/border-right.svg Normal file
View File

@@ -0,0 +1,12 @@
---
---
<svg>
<line x1="21" y1="3" x2="21" y2="21"></line>
<g stroke-dasharray=".001 4.5">
<line x1="3" y1="3" x2="21" y2="3"></line>
<line x1="21" y1="21" x2="3" y2="21"></line>
<line x1="3" y1="21" x2="3" y2="3"></line>
<line x1="3" y1="12" x2="21" y2="12"></line>
<line x1="12" y1="3" x2="12" y2="21"></line>
</g>
</svg>

12
_icons/border-top.svg Normal file
View File

@@ -0,0 +1,12 @@
---
---
<svg>
<line x1="3" y1="3" x2="21" y2="3"></line>
<g stroke-dasharray=".001 4.5">
<line x1="21" y1="3" x2="21" y2="21"></line>
<line x1="21" y1="21" x2="3" y2="21"></line>
<line x1="3" y1="21" x2="3" y2="3"></line>
<line x1="3" y1="12" x2="21" y2="12"></line>
<line x1="12" y1="3" x2="12" y2="21"></line>
</g>
</svg>

12
_icons/border-vertical.svg Normal file
View File

@@ -0,0 +1,12 @@
---
---
<svg>
<line x1="12" y1="3" x2="12" y2="21"></line>
<g stroke-dasharray=".001 4.5">
<line x1="3" y1="12" x2="21" y2="12"></line>
<line x1="3" y1="3" x2="21" y2="3"></line>
<line x1="3" y1="21" x2="3" y2="3"></line>
<line x1="21" y1="21" x2="3" y2="21"></line>
<line x1="21" y1="3" x2="21" y2="21"></line>
</g>
</svg>

5
_icons/check.svg Normal file
View File

@@ -0,0 +1,5 @@
---
---
<svg>
<polyline points="20 7 10 17 5 12" />
</svg>

2
_icons/circle.svg
View File

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

6
_icons/clock.svg Normal file
View File

@@ -0,0 +1,6 @@
---
---
<svg>
<circle cx="12" cy="12" r="9"></circle>
<polyline points="12 7 12 12 9 15" />
</svg>

2
_icons/square.svg
View File

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

2
bg.svg
View File

@@ -6,7 +6,7 @@
<rect x="2" y="2" width="20" height="20" 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> <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="5"></circle>
<circle cx="12" cy="12" r="11"></circle> <circle cx="12" cy="12" r="10"></circle>
<line x1="0" y1="0" x2="24" y2="24"></line> <line x1="0" y1="0" x2="24" y2="24"></line>
<line x1="24" y1="0" x2="0" y2="24"></line> <line x1="24" y1="0" x2="0" y2="24"></line>
<line x1="0" y1="8.5" x2="24" y2="8.5"></line> <line x1="0" y1="8.5" x2="24" y2="8.5"></line>

17
index.html
View File

@@ -77,11 +77,12 @@
<div class="mb"> <div class="mb">
<a href="#">{{ first-icon }} Link</a> <a href="#">{{ first-icon }} Link</a>
</div> </div>
</div> </div>
</div> </div>
<div> <div class="mb">
<div class="icons-list"> <div class="icons-list">
{% for icon in site.icons %} {% for icon in site.icons %}
{% assign name = icon.slug %} {% assign name = icon.slug %}
@@ -91,10 +92,22 @@
{% endfor %} {% endfor %}
</div> </div>
</div> </div>
<div class="mb">
<div class="icons-list icons-list-squares">
{% for icon in site.icons %}
{% 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 %}
</div>
</div>
</div> </div>
</div> </div>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script> <script src="{{ site.baseurl }}/jquery-3.4.1.slim.min.js"></script>
<script> <script>
$(document).ready(function () { $(document).ready(function () {

2
jquery-3.4.1.slim.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

43
style.scss
View File

@@ -5,6 +5,7 @@ $breakpoint: 50rem;
$primary: #206bc4; $primary: #206bc4;
$border: #eeeeee; $border: #eeeeee;
$muted: #aaaaaa; $muted: #aaaaaa;
$dark: #222222;
$btn-form-height: 2rem; $btn-form-height: 2rem;
$hover: rgba(0, 0, 0, .04); $hover: rgba(0, 0, 0, .04);
@@ -20,6 +21,7 @@ html {
body { body {
background: #fafbfc; background: #fafbfc;
font-size: .9375rem; font-size: .9375rem;
color: $dark;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
} }
@@ -99,7 +101,6 @@ a {
svg { svg {
width: 100%; width: 100%;
height: 100%; height: 100%;
stroke-width: 2;
opacity: .8; opacity: .8;
+ svg { + svg {
@@ -109,6 +110,13 @@ a {
position: absolute; position: absolute;
left: 0; left: 0;
top: 0; top: 0;
pointer-events: none;
stroke-dasharray: 0 !important;
* {
stroke-dasharray: 0 !important;
}
} }
} }
} }
@@ -116,13 +124,28 @@ a {
.icons-list { .icons-list {
display: flex; display: flex;
flex-wrap: wrap;
margin: -.25rem; margin: -.25rem;
} }
.icons-list-squares,
.icons-list-circles {
.icons-list-icon {
background: $dark;
color: #fff;
}
}
.icons-list-circles {
.icons-list-icon {
border-radius: 50%;
}
}
.icons-list-icon { .icons-list-icon {
margin: .25rem; margin: .25rem;
width: 2rem; min-width: 2.25rem;
height: 2rem; height: 2.25rem;
color: inherit; color: inherit;
border-radius: 3px; border-radius: 3px;
display: inline-flex; display: inline-flex;
@@ -130,7 +153,7 @@ a {
justify-content: center; justify-content: center;
&:hover { &:hover {
background-color: $hover; opacity: .75;
} }
.icon { .icon {
@@ -162,11 +185,9 @@ Components
min-width: $btn-form-height; min-width: $btn-form-height;
padding: 0 .75rem; padding: 0 .75rem;
.icon { .icon {
width: 1rem; width: 1rem;
height: 1rem; height: 1rem;
stroke-width: 2;
margin: 0 .5rem 0 -.25rem; margin: 0 .5rem 0 -.25rem;
} }
} }
@@ -219,7 +240,6 @@ Components
color: $muted; color: $muted;
width: 1.25rem; width: 1.25rem;
height: 1.25rem; height: 1.25rem;
stroke-width: 1.5;
position: absolute; position: absolute;
top: ($btn-form-height - 1.25rem) / 2; top: ($btn-form-height - 1.25rem) / 2;
right: ($btn-form-height - 1.25rem) / 2; right: ($btn-form-height - 1.25rem) / 2;
@@ -250,8 +270,8 @@ Components
vertical-align: bottom; vertical-align: bottom;
.icon { .icon {
height: 50%; height: 60%;
width: 50%; width: 60%;
} }
} }
@@ -276,5 +296,10 @@ Components
color: $primary; color: $primary;
border-bottom-color: $primary; border-bottom-color: $primary;
} }
.icon {
width: 1rem;
height: 1rem;
}
} }
} }