mirror_html/tabler-icons
1
0
Fork 0
mirror of https://github.com/tabler/tabler-icons.git synced 2025-08-30 17:20:31 +02:00
Code Issues Releases Wiki Activity

icon preview

Browse Source
This commit is contained in:
codecalm
2020-02-27 18:41:35 +01:00
parent 779f14f8b5
commit e6e7494bdc
12 changed files with 130 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
_config.yml
View File

@@ -1,3 +1,6 @@
exclude:
- .idea/*
collections:
icons:
output: true

1
_icons/a.md
View File

@@ -1 +0,0 @@
sdfsd

1
_icons/activity.txt
View File

@@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-activity"><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"></polyline></svg>
Side by Side

Before

Width:  |  Height:  |  Size: 282 B

1
_icons/alert-circle.svg
View File

@@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-alert-circle"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="8" x2="12" y2="12"></line><line x1="12" y1="16" x2="12.01" y2="16"></line></svg>
Side by Side

Before

Width:  |  Height:  |  Size: 356 B

1
_icons/arrow-left-circle.svg
View File

@@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-left-circle"><circle cx="12" cy="12" r="10"></circle><polyline points="12 8 8 12 12 16"></polyline><line x1="16" y1="12" x2="8" y2="12"></line></svg>
Side by Side

Before

Width:  |  Height:  |  Size: 359 B

6
_icons/arrow-left.svg Normal file
View File

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

6
_icons/arrow-right.svg Normal file
View File

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

6
_includes/icon.html Normal file
View File

@@ -0,0 +1,6 @@
{% assign name = include.name %}
{% assign icon = site.icons | where: "slug", name | first %}
{% assign content = icon.content | replace: '<svg', '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"' %}
{{ content }}

18
assets/bg.svg Normal file
View File

@@ -0,0 +1,18 @@
---
---
<svg width="48" height="48" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
<g fill="none" fill-rule="evenodd" stroke="#206bc4" stroke-width=".05" opacity="1">
<rect x="8" y="2" width="32" height="44" rx="3"></rect>
<rect x="5" y="5" width="38" height="38" rx="3"></rect>
<rect x="2" y="8" width="44" height="32" rx="3"></rect>
<circle cx="24" cy="24" r="10"></circle>
<circle cx="24" cy="24" r="22"></circle>
<path d="M0 48L48 0M0 0l48 48M24 48V0M17 0v48M31 0v48M48 24H0M0 31h48M0 17h48"></path>
</g>
<g stroke="#666" stroke-width=".01" opacity="1">
{% for i in (1..24) %}
<line x1="0" y1="{{ i | times: 2 }}" x2="48" y2="{{ i | times: 2 }}"></line>
<line x1="{{ i | times: 2 }}" y1="0" x2="{{ i | times: 2 }}" y2="48"></line>
{% endfor %}
</g>
</svg>

75
assets/style.scss Normal file
View File

@@ -0,0 +1,75 @@
---
---
html {
font-size: 16px;
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;
}
body {
background: #fafbfc;
font-size: 1rem;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.container {
max-width: 50rem;
margin: 0 auto;
padding: 1rem
}
.box {
padding: 2rem;
background: #ffff;
box-shadow: 0 0 0 1px rgba(0,0,0,.05), 0 1px 1px rgba(0,0,0,.1);
}
.icon-preview-wrap {
margin-bottom: 3rem;
position: relative;
&:before {
content: '';
padding-top: 100%;
display: block;
}
}
.icon-preview {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url(bg.svg) no-repeat center/100%;
svg {
width: 100%;
height: 100%;
stroke-width: 2;
opacity: .8;
}
}
.icons-list {
display: flex;
margin: -1rem;
.icon {
display: block;
margin: .5rem;
width: 1.5rem;
height: 1.5rem;
}
svg {
display: block;
width: 100%;
height: 100%;
stroke-width: 2;
}
}

22
index.html
View File

@@ -8,16 +8,26 @@
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="{{ site.baseurl }}/style.css">
<link rel="stylesheet" href="{{ site.baseurl }}/assets/style.css">
<title>Tabler Icons</title>
</head>
<body>
<div class="container">
<ul>
{% for icon in site.icons %}
<li>{{ icon }}</li>
{% endfor %}
</ul>
<div class="box">
<div class="icon-preview-wrap">
<div class="icon-preview">
{% include icon.html name="arrow-left" %}
</div>
</div>
<div class="icons-list">
{% for icon in site.icons %}
<div class="icon">
{% assign name = icon.slug %}
{% include icon.html name=name %}
</div>
{% endfor %}
</div>
</div>
</div>
</body>
</html>

6
style.scss
View File

@@ -1,6 +0,0 @@
---
---
body {
color: red;
}