tabler icons
Release 3.22.0
Ein Satz von 5718 kostenlosen, vom MIT lizenzierten, hochwertigen SVG-Symbolen, die Sie in Ihren Webprojekten verwenden können. Jedes Symbol ist in einem 24x24-Raster und einem 2-Pixel-Strich gestaltet.
Stöbern Sie auf tabler-icons.io →
Wenn Sie mein Projekt unterstützen und mir helfen möchten, es auszubauen, können Sie Sponsor auf GitHub werden oder einfach über PayPal spenden :)
npm install @tabler/icons --save
oder einfach von GitHub herunterladen.
Alle Symbole sind mit SVG erstellt, sodass Sie sie als <img> , background-image und Inline im HTML-Code platzieren können.
Wenn Sie ein Symbol als Bild laden, können Sie dessen Größe mithilfe von CSS ändern.
< img src =" path/to/icon.svg " alt =" icon title " />Sie können den Inhalt der Symboldatei in Ihren HTML-Code einfügen, um ihn auf der Seite anzuzeigen.
< a href ="" >
< svg
xmlns =" http://www.w3.org/2000/svg "
class =" icon icon-tabler icon-tabler-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 >
Click me
</ a > Dadurch können Sie die Größe, Farbe und stroke-width der Symbole mit CSS-Code ändern.
. icon-tabler {
color : red;
width : 32 px ;
height : 32 px ;
stroke-width : 1.25 ;
} Fügen Sie ein Symbol hinzu, das auf Ihrer Seite angezeigt werden soll, mit dem folgenden Markup ( activity im obigen Beispiel kann durch einen beliebigen gültigen Symbolnamen ersetzt werden):
< svg width =" 24 " height =" 24 " >
< use xlink:href =" path/to/tabler-sprite.svg#tabler-activity " />
</ svg > React-Komponenten, die über das Paket @tabler/icons-react verfügbar sind.
import { IconAward } from '@tabler/icons-react' ;
const MyComponent = ( ) => {
return < IconAward
size = { 36 } // set custom `width` and `height`
color = "red" // set `stroke` color
stroke = { 3 } // set `stroke-width`
strokeLinejoin = "miter" // override other SVG props
/ >
} @tabler/icons-react exportiert seine eigenen Typdeklarationen zur Verwendung mit React und Typescript.
Weitere Einzelheiten finden Sie in der Dokumentation.
Vue-Komponenten sind über das Paket @tabler/icons-vue verfügbar.
< template >
<!-- basic usage -->
< IconHome />
<!-- set `stroke` color -->
< IconHome color = " red " />
< IconHome stroke = " red " />
<!-- set custom `width` and `height` -->
< IconHome size = " 36 " />
<!-- set `stroke-width` -->
< IconHome strokeWidth = " 2 " />
< IconHome stroke-width = " 2 " />
</ template >
< script >
// Returns Vue component
import { IconHome } from ' @tabler/icons-vue ' ;
export default {
components : { IconHome }
};
</ script > oder mit <script setup>
< script setup >
// Import Vue component
import { IconHome } from ' @tabler/icons-vue ' ;
</ script >
< template >
< IconHome color = " red " size = " 36 " strokeWidth = " 2 " />
</ template >Weitere Einzelheiten finden Sie in der Dokumentation.
Angular-Komponenten sind über angular-tabler-icons Paket verfügbar. Installieren Sie das Paket und erstellen Sie dann das Symbolmodul:
import { NgModule } from '@angular/core' ;
import { TablerIconsModule } from 'angular-tabler-icons' ;
import { IconCamera , IconHeart , IconBrandGithub } from 'angular-tabler-icons/icons' ;
// Select some icons (use an object, not an array)
const icons = {
IconCamera ,
IconHeart ,
IconBrandGithub
} ;
@ NgModule ( {
imports : [
TablerIconsModule . pick ( icons )
] ,
exports : [
TablerIconsModule
]
} )
export class IconsModule { }Nachdem Sie das IconsModule in Ihr Feature oder freigegebenes Modul importiert haben, verwenden Sie die Symbole wie folgt:
< i-tabler name =" camera " > </ i-tabler >
< i-tabler name =" heart " style =" color: red; " > </ i-tabler >
< i-tabler name =" brand-github " class =" someclass " > </ i-tabler > angular-tabler-icons exportiert seine eigenen Typdeklarationen zur Verwendung mit Typescript.
Weitere Nutzungsdokumentation finden Sie in der offiziellen Dokumentation.
Svelte-Komponenten sind über das Paket @tabler/icons-svelte verfügbar.
< script lang = "ts" >
import { IconHeart } from '@tabler/icons-svelte';
< / script >
< main >
< IconHeart size = { 48 } stroke = { 1 } / >
< IconHeart size = "32" stroke = "1.5" / >
< IconHeart color = "crimson" class = "p-1" size = "96" stroke = "2" / >
< / main> Alle im @tabler/icons npm-Paket enthaltenen Dateien sind über ein CDN verfügbar.
< script src =" https://cdn.jsdelivr.net/npm/@tabler/icons@latest/icons-react/dist/index.umd.min.js " > </ script > < link rel =" stylesheet " href =" https://cdn.jsdelivr.net/npm/@tabler/icons-webfont@latest/tabler-icons.min.css " > Um eine bestimmte Version zu laden, ersetzen Sie latest durch die gewünschte Versionsnummer.
< script src =" https://cdn.jsdelivr.net/npm/@tabler/[email protected]/icons-react/dist/index.umd.min.js " > </ script > < i class =" ti ti-brand-tabler " > </ i > content : 'ec8f' ;Um Schriftarten zu kompilieren, installieren Sie zunächst Fontforge.
Beim Kompilieren der Schriftart wird nach einer JSON-Datei compile-options.json im Stammordner gesucht (gleicher Ordner wie package.json ). In dieser Datei können Sie zusätzliche Optionen definieren:
Die Standardeinstellungen lauten, wenn Sie die Datei nicht definiert haben:
{
"includeIcons" : [],
"fontForge" : " fontforge " ,
"strokeWidth" : null
} Die ausführbare Fontforge-Datei muss sich im Pfad befinden, oder Sie können den Pfad zur heruntergeladenen ausführbaren Fontforge-Datei in der Konfigurationsdatei festlegen. Wenn Sie es auf einem Mac in Ihrem Anwendungsverzeichnis installiert haben, ist es /Applications/FontForge.app/Contents/MacOS/FontForge . Sie können diesen Wert in der Datei compile-options.json festlegen.
{
"fontForge" : " /Applications/FontForge.app/Contents/MacOS/FontForge "
}Um die Schriftarten zu kompilieren, führen Sie Folgendes aus:
npm run build-iconfont Standardmäßig beträgt die Strichstärke 2. Sie können die Strichstärke in der compile-options.json ändern
{
"strokeWidth" : 1.5 ,
} Um die Größe der Schriftdatei zu reduzieren, können Sie einen Teilsatz von Symbolen zusammenstellen. Wenn Sie das Array leer lassen, werden alle Schriftarten kompiliert. Um nur zwei Symbole zu kompilieren, können Sie beispielsweise die folgende Option in der compile-options.json festlegen:
{
"includeIcons" : [ " alert-octagon " , " alert-triangle " ]
} Optionale Eigenschaft includeCategories – ein Array oder eine Zeichenfolge von einzuschließenden Symbolkategorien. Bei Kategorienamen wird die Groß-/Kleinschreibung nicht beachtet.
{
"includeCategories" : [ " Devices " , " System " ]
}oder
{
"includeCategories" : " Devices System "
} Optionale Eigenschaft excludeIcons – ein Array von Symbolnamen, mit denen einige Kategoriesymbole ausgeschlossen werden:
{
"includeCategories" : [ " system " ],
"excludeIcons" : [ " adjustments " ]
}Komplexe Lösung:
{
"includeIcons" : [ " alert-octagon " , " alert-triangle " ],
"includeCategories" : [ " devices " , " system " ],
"excludeIcons" : [ " adjustments " ]
} Für Android oder Desktop können Sie compose-icons verwenden, um Symbole in Ihren Projekten zu verwenden. (siehe Dokumente)
Alle Symbole in diesem Repository wurden mit dem Wert der Eigenschaft stroke-width erstellt. Wenn Sie also den Wert ändern, erhalten Sie verschiedene Symbolvarianten, die gut zu Ihrem Design passen.
Tabler Icons ist unter der MIT-Lizenz lizenziert.
