tabler icons
Release 3.22.0
Um conjunto de 5718 ícones SVG gratuitos de alta qualidade licenciados pelo MIT para você usar em seus projetos da web. Cada ícone é projetado em uma grade de 24x24 e um traço de 2px.
Navegue em tabler-icons.io →
Se você quiser apoiar meu projeto e me ajudar a desenvolvê-lo, você pode se tornar um patrocinador no GitHub ou apenas doar no PayPal :)
npm install @tabler/icons --save
ou apenas baixe do GitHub.
Todos os ícones são construídos com SVG, então você pode colocá-los como <img> , background-image e embutidos no código HTML.
Se você carregar um ícone como imagem, poderá modificar seu tamanho usando CSS.
< img src =" path/to/icon.svg " alt =" icon title " />Você pode colar o conteúdo do arquivo de ícone em seu código HTML para exibi-lo na 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 > Graças a isso, você pode alterar o tamanho, a cor e a stroke-width dos ícones com código CSS.
. icon-tabler {
color : red;
width : 32 px ;
height : 32 px ;
stroke-width : 1.25 ;
} Adicione um ícone a ser exibido em sua página com a seguinte marcação ( activity no exemplo acima pode ser substituída por qualquer nome de ícone válido):
< svg width =" 24 " height =" 24 " >
< use xlink:href =" path/to/tabler-sprite.svg#tabler-activity " />
</ svg > Componentes React disponíveis através do pacote @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 suas próprias declarações de tipo para uso com React e Typescript.
Para mais detalhes, consulte a documentação.
Componentes Vue disponíveis através do pacote @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 com <script setup>
< script setup >
// Import Vue component
import { IconHome } from ' @tabler/icons-vue ' ;
</ script >
< template >
< IconHome color = " red " size = " 36 " strokeWidth = " 2 " />
</ template >Para mais detalhes, consulte a documentação.
Componentes angulares disponíveis através do pacote angular-tabler-icons . Instale o pacote e crie o módulo de ícones:
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 { }Após importar o IconsModule em seu recurso ou módulo compartilhado, use os ícones da seguinte forma:
< 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 suas próprias declarações de tipo para uso com Typescript.
Para obter mais documentação de uso, consulte a documentação oficial.
Componentes Svelte disponíveis através do pacote @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 os arquivos incluídos no pacote npm @tabler/icons estão disponíveis em um 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 carregar uma versão específica, substitua latest pelo número da versão desejada.
< 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 fontes, primeiro instale o fontforge.
Ao compilar a fonte ele irá procurar um arquivo json compile-options.json na pasta raiz (mesma pasta do package.json ). Neste arquivo você pode definir opções extras:
As configurações padrão se você não tiver definido o arquivo serão:
{
"includeIcons" : [],
"fontForge" : " fontforge " ,
"strokeWidth" : null
} O executável do fontforge precisa estar no caminho ou você pode definir o caminho para o executável do fontforge baixado no arquivo de configuração. Se você instalou em um Mac no diretório do seu aplicativo, será /Applications/FontForge.app/Contents/MacOS/FontForge . Você pode definir esse valor no arquivo compile-options.json .
{
"fontForge" : " /Applications/FontForge.app/Contents/MacOS/FontForge "
}Para compilar as fontes, execute:
npm run build-iconfont Por padrão, a largura do traço é 2. Você pode alterar a largura do traço em compile-options.json
{
"strokeWidth" : 1.5 ,
} Para reduzir o tamanho do arquivo da fonte, você pode optar por compilar um subconjunto de ícones. Quando você deixa o array vazio ele irá compilar todas as fontes. Para compilar apenas dois ícones você pode definir, por exemplo, a seguinte opção no compile-options.json :
{
"includeIcons" : [ " alert-octagon " , " alert-triangle " ]
} Propriedade opcional includeCategories - uma matriz ou sequência de categorias de ícones a serem incluídas; os nomes das categorias não diferenciam maiúsculas de minúsculas.
{
"includeCategories" : [ " Devices " , " System " ]
}ou
{
"includeCategories" : " Devices System "
} Propriedade opcional excludeIcons - uma matriz de nomes de ícones usada para excluir alguns ícones de categoria:
{
"includeCategories" : [ " system " ],
"excludeIcons" : [ " adjustments " ]
}Solução complexa:
{
"includeIcons" : [ " alert-octagon " , " alert-triangle " ],
"includeCategories" : [ " devices " , " system " ],
"excludeIcons" : [ " adjustments " ]
} Para Android ou Desktop você pode usar compose-icons para usar ícones em seus projetos. (ver documentos)
Todos os ícones neste repositório foram criados com o valor da propriedade stroke-width , portanto, se você alterar o valor, poderá obter diferentes variantes de ícones que se adequarão bem ao seu design.
Tabler Icons é licenciado sob a licença MIT.
