diff options
Diffstat (limited to '.build')
| -rw-r--r-- | .build/iconfont.html | 117 | ||||
| -rw-r--r-- | .build/iconfont.scss | 40 |
2 files changed, 157 insertions, 0 deletions
diff --git a/.build/iconfont.html b/.build/iconfont.html new file mode 100644 index 00000000..a61a6ad3 --- /dev/null +++ b/.build/iconfont.html @@ -0,0 +1,117 @@ +<!doctype html> +<html lang="en"> +<head> + <meta charset="UTF-8"> + <meta name="viewport" + 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"> + <title>Tabler Icons - version <%= v %></title> + + <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600" rel="stylesheet"> + <link rel="stylesheet" href="./<%= fileName %>.css"> + + <style> + * { margin: 0; border: 0; outline: 0; box-sizing: border-box; } + + body { + font-family: 'Open Sans', sans-serif; + background: #fafbfc; + font-size: 1rem; + padding: 1rem; + } + + code { + font-family: Consolas, Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace, serif; + background: #fafafa; + border: 1px solid #f0f0f0; + color: #666; + padding: 2px 4px; + margin-bottom: 2px; + } + + .container { + max-width: 73rem; + margin: 0 auto; + } + + .box { + padding: 1rem; + background: #fff; + box-shadow: 0 0 0 1px rgba(0, 0, 0, .05), 0 1px 1px rgba(0, 0, 0, .1); + border-radius: 3px; + } + + .tabler-icons { + display: flex; + flex-wrap: wrap; + justify-content: space-between; + } + + .tabler-icon { + width: 10rem; + font-size: 12px; + text-align: center; + padding: .5rem .25rem 2rem; + } + + .tabler-icon i { + display: block; + align-items: center; + font-size: 32px; + height: 1em; + margin-bottom: 1rem; + } + + .tabler-icon code { + font-size: 10px; + } + + .tabler-icon strong { + display: block; + margin-bottom: .5rem; + } + + .tabler-icon-codes { + line-height: 2em; + } + + .text-muted { + color: #999; + } + + .header { + text-align: center; + margin: 2rem 0 3rem; + } + + + </style> +</head> +<body> +<div class="container"> + <header class="header"> + <h1> + Tabler Icons + </h1> + <p class="text-muted">version <%= v %></p> + </header> + + <div class="box"> + <div class="tabler-icons"> + <% glyphs.forEach(function(glyph) { %> + <div class="tabler-icon"> + <i class="ti ti-<%= glyph.name %>"></i> + <strong><%= glyph.name %></strong> + <div class="tabler-icon-codes"> + <code>ti ti-<%= glyph.name %></code><br> + <code>\<%= glyph.unicode[0].codePointAt(0).toString(16) %></code> + </div> + </div> + <% }) %> + </div> + </div> +</div> + + +</body> +</html> diff --git a/.build/iconfont.scss b/.build/iconfont.scss new file mode 100644 index 00000000..97c21d4e --- /dev/null +++ b/.build/iconfont.scss @@ -0,0 +1,40 @@ +/*! + * Tabler Icons <%= v %> by tabler - https://tabler.io + * License - https://github.com/tabler/tabler-icons/blob/master/LICENSE + */ +$ti-font-family: '<%= fileName %>' !default; +$ti-font-path: './fonts' !default; +$ti-font-display: null !default; +$ti-icon-prefix: 'ti' !default; + +@font-face { + font-family: $ti-font-family; + font-style: normal; + font-weight: 400; + font-display: $ti-font-display; + src: url('#{$ti-font-path}/<%= fileName %>.eot'); + src: url('#{$ti-font-path}/<%= fileName %>.eot?#iefix') format('embedded-opentype'), + url('#{$ti-font-path}/<%= fileName %>.woff2') format('woff2'), + url('#{$ti-font-path}/<%= fileName %>.woff') format('woff'), + url('#{$ti-font-path}/<%= fileName %>.ttf') format('truetype'); +} + +.#{$ti-icon-prefix} { + font-family: $ti-font-family !important; + speak: none; + font-style: normal; + font-weight: normal; + font-variant: normal; + text-transform: none; + line-height: 1; + + /* Better Font Rendering */ + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +<% glyphs.forEach(function(glyph) { %> +$ti-icon-<%= glyph.name %>: '\<%= glyph.unicode[0].codePointAt(0).toString(16) %>';<% }); %> + +<% glyphs.forEach(function(glyph) { %> +.#{$ti-icon-prefix}-<%= glyph.name %>:before { content: $ti-icon-<%= glyph.name %>; }<% }); %> |