mirror_html/tabler-icons
1
0
Fork 0
mirror of https://github.com/tabler/tabler-icons.git synced 2025-08-30 17:20:31 +02:00
Code Issues Releases Wiki Activity

readme

Browse Source
This commit is contained in:
codecalm
2020-03-10 23:00:25 +01:00
parent 7fa50c654d
commit 6dcb68ff1b
5 changed files with 24 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
_includes/icon.html
View File

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

2
dist/icons-sprite.svg vendored
View File

File diff suppressed because one or more lines are too long
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 86 KiB

After

Width:  |  Height:  |  Size: 88 KiB

2
gulpfile.js
View File

@@ -22,7 +22,7 @@ gulp.task('icons-sprite', function (cb) {
.replace(/>\s+</g, '><')
.trim();
svgContent += `<symbol id="${name}" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">${svgFileContent}</symbol>`
svgContent += `<symbol id="tabler-${name}" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">${svgFileContent}</symbol>`
});
let svg = `<svg xmlns="http://www.w3.org/2000/svg"><defs>${svgContent}</defs></svg>`;

14
readme.md
View File

@@ -4,6 +4,20 @@ A set of over 300 free MIT-licensed high-quality SVG icons for you to use in you
![Tabler icons](icons.svg)
## Install with npm
```
npm install tabler-icons --save
```
### Multiple strokes
All icons in this repository are drawn with the value `stroke` property, so if you change its value you can get different variants of icon, that will fit into your project.
```
<svg xmlns="http://www.w3.org/2000/svg" class="icon tabler-icon tabler-icon-disabled" width="24" height="24" viewBox="0 0 24 24" stroke-width="1.25" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
...
</svg>
```
![Tabler icons](icons-stroke.svg)

7
test.html Normal file
View File

@@ -0,0 +1,7 @@
---
layout: default
---
<svg width="24" height="24">
<use xlink:href="dist/icons-sprite.svg#tabler-disabled" stroke-width="1"></use>
</svg>