tabler icons
Release 3.22.0
Un ensemble de 5 718 icônes SVG gratuites de haute qualité sous licence MIT que vous pouvez utiliser dans vos projets Web. Chaque icône est conçue sur une grille 24x24 et un trait de 2 pixels.
Naviguez sur tabler-icons.io →
Si vous souhaitez soutenir mon projet et m'aider à le développer, vous pouvez devenir sponsor sur GitHub ou simplement faire un don sur PayPal :)
npm install @tabler/icons --save
ou téléchargez simplement depuis GitHub.
Toutes les icônes sont construites avec SVG, vous pouvez donc les placer sous forme de <img> , background-image et inline dans le code HTML.
Si vous chargez une icône sous forme d'image, vous pouvez modifier sa taille à l'aide de CSS.
< img src =" path/to/icon.svg " alt =" icon title " />Vous pouvez coller le contenu du fichier icône dans votre code HTML pour l'afficher sur la page.
< 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 > Grâce à cela, vous pouvez modifier la taille, la couleur et la stroke-width des icônes avec du code CSS.
. icon-tabler {
color : red;
width : 32 px ;
height : 32 px ;
stroke-width : 1.25 ;
} Ajoutez une icône à afficher sur votre page avec le balisage suivant ( activity dans l'exemple ci-dessus peut être remplacée par n'importe quel nom d'icône valide) :
< svg width =" 24 " height =" 24 " >
< use xlink:href =" path/to/tabler-sprite.svg#tabler-activity " />
</ svg > Composants React disponibles via le package @tabler/icons-react .
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 exporte ses propres déclarations de type pour une utilisation avec React et Typescript.
Pour plus de détails, consultez la documentation.
Composants Vue disponibles via le package @tabler/icons-vue .
< 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 > ou avec <script setup>
< script setup >
// Import Vue component
import { IconHome } from ' @tabler/icons-vue ' ;
</ script >
< template >
< IconHome color = " red " size = " 36 " strokeWidth = " 2 " />
</ template >Pour plus de détails, consultez la documentation.
Composants angulaires disponibles via le package angular-tabler-icons . Installez le package, puis créez le module d'icônes :
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 { }Après avoir importé le IconsModule dans votre fonctionnalité ou module partagé, utilisez les icônes comme suit :
< 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 exporte ses propres déclarations de type pour une utilisation avec Typescript.
Pour plus de documentation d'utilisation, reportez-vous à la documentation officielle.
Composants Svelte disponibles via le package @tabler/icons-svelte .
< 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> Tous les fichiers inclus dans le package @tabler/icons npm sont disponibles sur un CDN.
< 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 " > Pour charger une version spécifique, remplacez latest par le numéro de version souhaité.
< 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' ;Pour compiler les polices, installez d’abord fontforge.
Lors de la compilation de la police, il recherchera un fichier json compile-options.json dans le dossier racine (même dossier que package.json ). Dans ce fichier, vous pouvez définir des options supplémentaires :
Les paramètres par défaut si vous n'avez pas défini le fichier seront :
{
"includeIcons" : [],
"fontForge" : " fontforge " ,
"strokeWidth" : null
} L'exécutable fontforge doit se trouver dans le chemin ou vous pouvez définir le chemin de l'exécutable fontforge téléchargé dans le fichier de configuration. Si vous avez installé sur un Mac dans le répertoire de votre application, ce sera /Applications/FontForge.app/Contents/MacOS/FontForge . Vous pouvez définir cette valeur dans le fichier compile-options.json .
{
"fontForge" : " /Applications/FontForge.app/Contents/MacOS/FontForge "
}Pour compiler les polices, exécutez :
npm run build-iconfont Par défaut, la largeur du trait est de 2. Vous pouvez modifier la largeur du trait dans le compile-options.json
{
"strokeWidth" : 1.5 ,
} Pour réduire la taille du fichier de police, vous pouvez choisir de compiler un sous-ensemble d'icônes. Lorsque vous laissez le tableau vide, toutes les polices seront compilées. Pour compiler seulement deux icônes vous pouvez définir par exemple l'option suivante dans le compile-options.json :
{
"includeIcons" : [ " alert-octagon " , " alert-triangle " ]
} Propriété facultative includeCategories - un tableau ou une chaîne de catégories d'icônes à inclure, les noms de catégories ne sont pas sensibles à la casse.
{
"includeCategories" : [ " Devices " , " System " ]
}ou
{
"includeCategories" : " Devices System "
} Propriété facultative excludeIcons - un tableau de noms d'icônes permettant d'exclure certaines icônes de catégorie :
{
"includeCategories" : [ " system " ],
"excludeIcons" : [ " adjustments " ]
}Solution complexe :
{
"includeIcons" : [ " alert-octagon " , " alert-triangle " ],
"includeCategories" : [ " devices " , " system " ],
"excludeIcons" : [ " adjustments " ]
} Pour Android ou Desktop, vous pouvez utiliser compose-icons pour utiliser des icônes dans vos projets. (voir doc)
Toutes les icônes de ce référentiel ont été créées avec la valeur de la propriété stroke-width , donc si vous modifiez la valeur, vous pouvez obtenir différentes variantes d'icônes qui s'intégreront bien à votre conception.
Tabler Icons est sous licence MIT.
