tabler icons
Release 3.22.0
Un conjunto de 5718 iconos SVG gratuitos de alta calidad con licencia MIT para que los utilices en tus proyectos web. Cada ícono está diseñado en una cuadrícula de 24x24 y un trazo de 2px.
Navegar en tabler-icons.io →
Si quieres apoyar mi proyecto y ayudarme a hacerlo crecer, puedes convertirte en patrocinador en GitHub o simplemente donar en PayPal :)
npm install @tabler/icons --save
o simplemente descárguelo desde GitHub.
Todos los íconos están creados con SVG, por lo que puedes colocarlos como <img> , background-image e integrados en el código HTML.
Si carga un icono como imagen, puede modificar su tamaño usando CSS.
< img src =" path/to/icon.svg " alt =" icon title " />Puede pegar el contenido del archivo de icono en su código HTML para mostrarlo en la página.
< 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 > Gracias a eso, puedes cambiar el tamaño, el color y el stroke-width de los íconos con código CSS.
. icon-tabler {
color : red;
width : 32 px ;
height : 32 px ;
stroke-width : 1.25 ;
} Agregue un ícono para que se muestre en su página con el siguiente marcado ( activity en el ejemplo anterior se puede reemplazar con cualquier nombre de ícono válido):
< svg width =" 24 " height =" 24 " >
< use xlink:href =" path/to/tabler-sprite.svg#tabler-activity " />
</ svg > Componentes de React disponibles a través del paquete @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 exporta sus propias declaraciones de tipo para usar con React y Typecript.
Para más detalles, consulte la documentación.
Componentes de Vue disponibles a través del paquete @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 > o con <script setup>
< script setup >
// Import Vue component
import { IconHome } from ' @tabler/icons-vue ' ;
</ script >
< template >
< IconHome color = " red " size = " 36 " strokeWidth = " 2 " />
</ template >Para más detalles, consulte la documentación.
Componentes angulares disponibles a través del paquete angular-tabler-icons . Instale el paquete, luego cree el módulo de iconos:
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 { }Después de importar IconsModule en su función o módulo compartido, use los íconos de la siguiente manera:
< 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 exporta sus propias declaraciones de tipo para usar con Typecript.
Para obtener más documentación de uso, consulte la documentación oficial.
Componentes esbeltos disponibles a través del paquete @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> Todos los archivos incluidos en el paquete @tabler/icons npm están disponibles a través de una 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 " > Para cargar una versión específica, reemplace latest con el número de versión deseado.
< 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' ;Para compilar fuentes, primero instale fontforge.
Al compilar la fuente, buscará un archivo json compile-options.json en la carpeta raíz (la misma carpeta que package.json ). En este archivo puede definir opciones adicionales:
La configuración predeterminada si no ha definido el archivo será:
{
"includeIcons" : [],
"fontForge" : " fontforge " ,
"strokeWidth" : null
} El ejecutable de fontforge debe estar en la ruta o puede establecer la ruta al ejecutable de fontforge descargado en el archivo de configuración. Si instaló en una Mac en el directorio de su aplicación, será /Applications/FontForge.app/Contents/MacOS/FontForge . Puede establecer este valor en el archivo compile-options.json .
{
"fontForge" : " /Applications/FontForge.app/Contents/MacOS/FontForge "
}Para compilar las fuentes ejecute:
npm run build-iconfont De forma predeterminada, el ancho del trazo es 2. Puede cambiar el ancho del trazo en compile-options.json
{
"strokeWidth" : 1.5 ,
} Para reducir el tamaño del archivo de fuente, puede optar por compilar un subconjunto de iconos. Cuando dejes la matriz vacía, se compilarán todas las fuentes. Para compilar solo dos íconos, puede configurar, por ejemplo, la siguiente opción en compile-options.json :
{
"includeIcons" : [ " alert-octagon " , " alert-triangle " ]
} Propiedad opcional includeCategories : una matriz o cadena de categorías de iconos para incluir; los nombres de las categorías no distinguen entre mayúsculas y minúsculas.
{
"includeCategories" : [ " Devices " , " System " ]
}o
{
"includeCategories" : " Devices System "
} Propiedad opcional excludeIcons : una serie de nombres de iconos que se utilizan para excluir algunos iconos de categorías:
{
"includeCategories" : [ " system " ],
"excludeIcons" : [ " adjustments " ]
}Solución compleja:
{
"includeIcons" : [ " alert-octagon " , " alert-triangle " ],
"includeCategories" : [ " devices " , " system " ],
"excludeIcons" : [ " adjustments " ]
} Para Android o escritorio, puedes usar compose-icons para usar íconos en tus proyectos. (ver documentos)
Todos los íconos en este repositorio se crearon con el valor de la propiedad stroke-width , por lo que si cambia el valor, puede obtener diferentes variantes de íconos que se adaptarán bien a su diseño.
Tabler Icons tiene la licencia MIT.
