mirror of
https://github.com/tabler/tabler-icons.git
synced 2025-08-30 17:20:31 +02:00
simple icon manager
This commit is contained in:
codecalm
7
_icons/arrow-down.svg
Normal file
7
_icons/arrow-down.svg
Normal 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>
|
||||
@@ -1,6 +1,7 @@
|
||||
---
|
||||
---
|
||||
<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>
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
---
|
||||
---
|
||||
<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>
|
||||
|
||||
7
_icons/arrow-up.svg
Normal file
7
_icons/arrow-up.svg
Normal 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>
|
||||
@@ -1,6 +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"' %}
|
||||
{% 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 }}
|
||||
|
||||
@@ -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 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) %}
|
||||
<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 %}
|
||||
</g>
|
||||
</svg>
|
||||
|
||||
@@ -1,5 +1,16 @@
|
||||
---
|
||||
---
|
||||
|
||||
$breakpoint: (min-width: 50rem);
|
||||
$primary: #206bc4;
|
||||
$border: #eeeeee;
|
||||
$muted: #aaaaaa;
|
||||
$btn-form-height: 2rem;
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
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;
|
||||
@@ -7,21 +18,54 @@ html {
|
||||
|
||||
body {
|
||||
background: #fafbfc;
|
||||
font-size: 1rem;
|
||||
font-size: .9375rem;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
a {
|
||||
color: $primary;
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 50rem;
|
||||
max-width: 60rem;
|
||||
margin: 0 auto;
|
||||
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 {
|
||||
padding: 2rem;
|
||||
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 {
|
||||
@@ -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
60
index.html
@@ -14,14 +14,66 @@
|
||||
<body>
|
||||
<div class="container">
|
||||
<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 class="icons-list">
|
||||
{% for icon in site.icons %}
|
||||
<div class="icon">
|
||||
<div class="icon" title="{{ icon.slug }}">
|
||||
{% assign name = icon.slug %}
|
||||
{% include icon.html name=name %}
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user