Public-Mirrors
/
tabler-icons
mirror of https://github.com/tabler/tabler-icons
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

icon preview

pull/2/head
codecalm 7 years ago
parent
779f14f8b5
commit
e6e7494bdc
12 changed files with 130 additions and 16 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 3
      _config.yml
  2. 1
      _icons/a.md
  3. 1
      _icons/activity.txt
  4. 1
      _icons/alert-circle.svg
  5. 1
      _icons/arrow-left-circle.svg
  6. 6
      _icons/arrow-left.svg
  7. 6
      _icons/arrow-right.svg
  8. 6
      _includes/icon.html
  9. 18
      assets/bg.svg
  10. 75
      assets/style.scss
  11. 22
      index.html
  12. 6
      style.scss

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
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
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
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
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
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;
}
Write Preview
Loading…
Cancel
Save