icons

Gemfile

@@ -3,3 +3,4 @@ source "https://rubygems.org"
 git_source(:github) {|repo_name| "https://github.com/#{repo_name}" }
 
 gem "jekyll", "~> 4.0"
+gem "jekyll-last-modified-at"

Gemfile.lock

@@ -29,6 +29,9 @@ GEM
       rouge (~> 3.0)
       safe_yaml (~> 1.0)
       terminal-table (~> 1.8)
+    jekyll-last-modified-at (1.2.1)
+      jekyll (>= 3.7, < 5.0)
+      posix-spawn (~> 0.3.9)
     jekyll-sass-converter (2.1.0)
       sassc (> 2.0.1, < 3.0)
     jekyll-watch (2.2.1)
@@ -43,6 +46,7 @@ GEM
     mercenary (0.3.6)
     pathutil (0.16.2)
       forwardable-extended (~> 2.6)
+    posix-spawn (0.3.13)
     public_suffix (4.0.3)
     rb-fsevent (0.10.3)
     rb-inotify (0.10.1)
@@ -60,6 +64,7 @@ PLATFORMS
 
 DEPENDENCIES
   jekyll (~> 4.0)
+  jekyll-last-modified-at
 
 BUNDLED WITH
    1.17.3

_config.yml

@@ -1,3 +1,6 @@
+plugins:
+  - jekyll-last-modified-at
+
 exclude:
   - .idea/*
 

_icons/activity.svg

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

_icons/alert-circle.svg

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

_icons/alert-octagon.svg

@@ -0,0 +1,7 @@
+---
+---
+<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>

_icons/align-left.svg

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

_icons/align-right.svg

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

_icons/arrow-narrow-down.svg

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

_icons/arrow-narrow-left.svg

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

_icons/arrow-narrow-right.svg

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

_icons/arrow-narrow-up.svg

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

_icons/circle.svg

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

_icons/minus.svg

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

_icons/plus.svg

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

_icons/square.svg

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

_icons/x.svg

@@ -0,0 +1,6 @@
+---
+---
+<svg>
+  <line x1="18" y1="6" x2="6" y2="18" />
+  <line x1="6" y1="6" x2="18" y2="18" />
+</svg>

assets/bg.svg

@@ -2,9 +2,9 @@
 ---
 <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="4" y="1" width="16" height="22" rx="3"></rect>
-    <rect x="2" y="2" width="20" height="20" rx="1.5"></rect>
+    <rect x="2" y="2" width="20" height="20" rx="3"></rect>
-    <rect x="1" y="4" width="22" height="16" rx="1.5"></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="11"></circle>
     <line x1="0" y1="0" x2="24" y2="24"></line>
@@ -13,6 +13,8 @@
     <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>
+    <line x1="0" y1="12" x2="24" y2="12"></line>
+    <line x1="12" y1="0" x2="12" y2="24"></line>
   </g>
   <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) %}

assets/style.scss

@@ -69,6 +69,13 @@ a {
   box-shadow: 0 0 0 1px rgba(0, 0, 0, .05), 0 1px 1px rgba(0, 0, 0, .1);
 }
 
+.icon-title {
+  font-size: 1.25rem;
+  line-height: 1;
+  margin: 0 0 3rem;
+  font-weight: 600;
+}
+
 .icon-preview-wrap {
   position: relative;
 

index.html

@@ -10,14 +10,21 @@
 
 	<link rel="stylesheet" href="{{ site.baseurl }}/assets/style.css">
 	<title>Tabler Icons</title>
+
+	<style>
+		body {
+			display: none;
+		}
+	</style>
 </head>
 <body>
 <div class="container">
 	<div class="box">
 
-		{% assign last-icon = site.icons | sort: date | reverse | first %}
+		{% assign first-icon = site.icons | reverse | first %}
-		{% capture last-icon %}
+		{% assign slug = first-icon.slug %}
-		{% include icon.html name=last-icon.slug %}
+		{% capture first-icon %}
+		{% include icon.html name=slug %}
 		{% endcapture %}
 
 		<div class="row mb js-icon-manager">
@@ -25,47 +32,49 @@
 
 				<div class="icon-preview-wrap">
 					<div class="icon-preview">
-						{{ last-icon }}
+						{{ first-icon }}
 					</div>
 				</div>
 			</div>
 			<div class="col-aside">
 
+				<h1 class="icon-title js-icon-name">{{ slug }}</h1>
+
 				<div class="mb">
 					<button class="btn">
-						{{ last-icon }} Button
+						{{ first-icon }} Button
 					</button>
 					<button class="btn btn-icon">
-						{{ last-icon }}
+						{{ first-icon }}
 					</button>
 					<button class="btn btn-link">
-						{{ last-icon }} Button
+						{{ first-icon }} Button
 					</button>
 				</div>
 
 				<div class="input-icon mb">
 					<input type="text" class="input" value="Input value">
-					{{ last-icon }}
+					{{ first-icon }}
 				</div>
 
 				<div class="input-icon icon-left mb">
-					{{ last-icon }}
+					{{ first-icon }}
 					<input type="text" class="input" placeholder="Input placeholder">
 				</div>
 
 				<div class="mb">
-					<div class="avatar">{{ last-icon }}</div>
+					<div class="avatar">{{ first-icon }}</div>
-					<div class="avatar avatar-sm">{{ last-icon }}</div>
+					<div class="avatar avatar-sm">{{ first-icon }}</div>
 				</div>
 
 				<div class="tabs mb">
-					<a class="tab active">{{ last-icon }} Tab 1</a>
+					<a class="tab active">{{ first-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>
+					<a href="#">{{ first-icon }} Link</a>
 				</div>
 			</div>
 		</div>
@@ -74,8 +83,8 @@
 		<div>
 			<div class="icons-list">
 				{% for icon in site.icons %}
-				<a href="#" class="icons-list-icon js-icon" title="{{ icon.slug }}">
+				{% assign name = icon.slug %}
-					{% 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 %}
@@ -86,10 +95,26 @@
 
 <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
 <script>
-	$(document).ready(function(){
+
-		$('body').on('click', '.js-icon', function(){
+	$(document).ready(function () {
+		$('body').on('click', '.js-icon', function (e) {
+			var icon = $(this).attr('data-icon');
+			
+			$('.js-icon-name').html(icon);
+			localStorage.setItem('icon', icon);
+
 			$('.js-icon-manager svg').replaceWith($(this).find('>svg:eq(0)').clone());
+
+			e.preventDefault();
+			return false;
 		});
+
+		var icon = localStorage.getItem('icon');
+		if (icon) {
+			$('.js-icon[data-icon="' + icon + '"]').click();
+		}
+
+		document.body.style.display = "block"
 	});
 </script>
 </body>