Mirror
/
tabler-icons
mirror of https://github.com/tabler/tabler-icons.git
2
0
Fork 0
Code Issues Releases Wiki Activity
Browse Source

simple icon manager

pull/2/head
codecalm 5 years ago
parent
501a4279a7
commit
27bab3ccc8
8 changed files with 285 additions and 23 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 7
      _icons/arrow-down.svg
  2. 5
      _icons/arrow-left.svg
  3. 5
      _icons/arrow-right.svg
  4. 7
      _icons/arrow-up.svg
  5. 2
      _includes/icon.html
  6. 34
      assets/bg.svg
  7. 188
      assets/style.scss
  8. 60
      index.html

7
_icons/arrow-down.svg
View File

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

5
_icons/arrow-left.svg
View File

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

5
_icons/arrow-right.svg
View File

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

7
_icons/arrow-up.svg
View File

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

2
_includes/icon.html
View File

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

34
assets/bg.svg
View File

@ -1,18 +1,30 @@
--- ---
--- ---
<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>
<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>
<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>
<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="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>
</g> </g>
<g stroke="#666" stroke-width=".01" opacity="1">
<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) %} {% 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>
<g fill="#ccc" font-size=".3">
<text x="0" y="{{ i | plus: 0.35 }}" >{{ i }}</text>
<text x="{{ i | plus: 0.1 }}" y=".25" >{{ i }}</text>
</g>
<g stroke="#666" stroke-width=".01">
<line x1="0" y1="{{ i }}" x2="24" y2="{{ i }}"></line>
<line x1="{{ i }}" y1="0" x2="{{ i }}" y2="24"></line>
</g>
{% endfor %} {% endfor %}
</g> </g>
</svg> </svg>

188
assets/style.scss
View File

@ -1,5 +1,16 @@
--- ---
--- ---
$breakpoint: (min-width: 50rem);
$primary: #206bc4;
$border: #eeeeee;
$muted: #aaaaaa;
$btn-form-height: 2rem;
* {
box-sizing: border-box;
}
html { html {
font-size: 16px; 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; 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;
@ -7,21 +18,54 @@ html {
body { body {
background: #fafbfc; background: #fafbfc;
font-size: 1rem;
font-size: .9375rem;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
} }
a {
color: $primary;
text-decoration: none;
&:hover {
text-decoration: underline;
}
}
.container { .container {
max-width: 50rem;
max-width: 60rem;
margin: 0 auto; margin: 0 auto;
padding: 1rem padding: 1rem
} }
.row {
display: flex;
flex-direction: column;
@media #{$breakpoint} {
flex-direction: row;
}
}
.col {
flex: 1;
}
.col-aside {
width: 15rem;
margin-top: 2rem;
@media #{$breakpoint} {
margin-top: 0;
margin-left: 2rem;
flex-direction: row;
}
}
.box { .box {
padding: 2rem; padding: 2rem;
background: #ffff; background: #ffff;
box-shadow: 0 0 0 1px rgba(0,0,0,.05), 0 1px 1px rgba(0,0,0,.1);
box-shadow: 0 0 0 1px rgba(0, 0, 0, .05), 0 1px 1px rgba(0, 0, 0, .1);
} }
.icon-preview-wrap { .icon-preview-wrap {
@ -73,3 +117,141 @@ body {
} }
} }
.mb {
margin-bottom: 2rem;
}
/*
Components
*/
.btn {
display: inline-flex;
color: #ffffff;
background: $primary;
border: 0;
border-radius: 3px;
font-size: inherit;
line-height: 1;
justify-content: center;
align-items: center;
min-height: $btn-form-height;
min-width: $btn-form-height;
padding: 0 .75rem;
.icon {
width: 1rem;
height: 1rem;
stroke-width: 2;
margin: 0 .5rem 0 -.25rem;
}
}
.btn-icon {
padding: 0;
justify-content: center;
.icon {
margin: 0;
}
}
.btn-link {
background: transparent;
color: $primary;
}
.input {
border: 1px solid $border;
border-radius: 3px;
height: $btn-form-height;
display: block;
font-size: inherit;
font-family: inherit;
padding: 0 .5rem;
width: 100%;
&:focus {
outline: 0;
box-shadow: 0 0 0 3px rgba($primary, .1);
border-color: rgba($primary, .4);
}
}
.icon {
width: 1em;
height: 1em;
vertical-align: -.15em;
}
.input-icon {
position: relative;
.input {
padding-right: 2rem;
}
.icon {
color: $muted;
width: 1.25rem;
height: 1.25rem;
stroke-width: 1.5;
position: absolute;
top: ($btn-form-height - 1.25rem) / 2;
right: ($btn-form-height - 1.25rem) / 2;
}
&.icon-left {
.icon {
left: ($btn-form-height - 1.25rem) / 2;
right: auto;
}
.input {
padding-left: 2rem;
padding-right: 0;
}
}
}
.avatar {
background: rgba($muted, .1);
color: $muted;
display: inline-flex;
width: 2.5rem;
height: 2.5rem;
align-items: center;
justify-content: center;
border-radius: 50%;
vertical-align: bottom;
.icon {
height: 50%;
width: 50%;
}
}
.avatar-sm {
width: 1.5rem;
height: 1.5rem;
}
.tabs {
display: flex;
.tab {
flex: 1;
text-align: center;
border-bottom: 1px solid $border;
padding: .25rem 0;
color: inherit;
text-decoration: none;
cursor: pointer;
&.active {
color: $primary;
border-bottom-color: $primary;
}
}
}

60
index.html
View File

@ -14,14 +14,66 @@
<body> <body>
<div class="container"> <div class="container">
<div class="box"> <div class="box">
<div class="icon-preview-wrap">
<div class="icon-preview">
{% include icon.html name="arrow-left" %}
{% assign last-icon = site.icons | sort: date | reverse | first %}
{% capture last-icon %}
{% include icon.html name=last-icon.slug %}
{% endcapture %}
<div class="row">
<div class="col">
<div class="icon-preview-wrap">
<div class="icon-preview">
{{ last-icon }}
</div>
</div>
</div>
<div class="col-aside">
<div class="mb">
<button class="btn">
{{ last-icon }} Button
</button>
<button class="btn btn-icon">
{{ last-icon }}
</button>
<button class="btn btn-link">
{{ last-icon }} Button
</button>
</div>
<div class="input-icon mb">
<input type="text" class="input" value="Input value">
{{ last-icon }}
</div>
<div class="input-icon icon-left mb">
{{ last-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>
<div class="tabs mb">
<a class="tab active">{{ last-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>
</div>
</div> </div>
</div> </div>
<div class="icons-list"> <div class="icons-list">
{% for icon in site.icons %} {% for icon in site.icons %}
<div class="icon">
<div class="icon" title="{{ icon.slug }}">
{% assign name = icon.slug %} {% assign name = icon.slug %}
{% include icon.html name=name %} {% include icon.html name=name %}
</div> </div>

Write Preview
Loading…
Cancel
Save