tailwindcss icons

? Você pode ajudar o autor a se tornar um mantenedor de código aberto em tempo integral patrocinando-o no GitHub.

---

@egoist/tailwindcss-icons

Use qualquer ícone do Iconify

Instalar

npm i @egoist/tailwindcss-icons -D

Uso

Em seu tailwind.config.js :

 const { iconsPlugin , getIconCollections } = require ( "@egoist/tailwindcss-icons" )

module . exports = {
  plugins : [
    iconsPlugin ( {
      // Select the icon collections you want to use
      // You can also ignore this option to automatically discover all individual icon packages you have installed
      // If you install @iconify/json, you should explicitly specify the collections you want to use, like this:
      collections : getIconCollections ( [ "mdi" , "lucide" ] ) ,
      // If you want to use all icons from @iconify/json, you can do this:
      // collections: getIconCollections("all"),
      // and the more recommended way is to use `dynamicIconsPlugin`, see below.
    } ) ,
  ] ,
}

Você também precisa instalar @iconify/json (coleções completas de ícones, 50 MB) ou @iconify-json/{collection_name} (pacote de ícones individuais):

 # install every icon:
npm i @iconify/json -D

# or install individual packages like this:
npm i @iconify-json/mdi @iconify-json/lucide -D

Então você pode usar os ícones no seu HTML:

 <!-- pattern: i-{collection_name}-{icon_name} -->
< span class =" i-mdi-home " > </ span >

Pesquise o ícone que deseja usar aqui: https://icones.js.org

Dica

Para obter a lista completa de nomes de ícones como tipo de texto digitado, você pode consultar este problema.

Opções de plug-in

Opção	Tipo	Padrão	Descrição
prefixo	corda	i	Prefixo de classe para regras de ícones correspondentes
escala	número	1	Dimensionar em relação ao tamanho da fonte atual
largura do traço	número	undefined	Largura do traço para ícones (isso pode não funcionar para todos os ícones)
propriedades extras	Registro<string, string>	{}	Propriedades CSS extras aplicadas ao CSS gerado.
coleçãoNomesAlias	[digite CollectionNames]?: string	{}	Alias ​​para personalizar nomes de coleções.

Ícones personalizados

Você também pode usar ícones personalizados com este plugin, por exemplo:

 module . exports = {
  plugins : [
    iconsPlugin ( {
      collections : {
        foo : {
          icons : {
            "arrow-left" : {
              // svg body
              body : '<path d="M10 19l-7-7m0 0l7-7m-7 7h18"/>' ,
              // svg width and height, optional
              width : 24 ,
              height : 24 ,
            } ,
          } ,
        } ,
      } ,
    } ) ,
  ] ,
}

Então você pode usar este ícone personalizado como nome de classe: i-foo-arrow-left .

Dica

Para ler ícones personalizados do diretório, você pode consultar Carregar svgs do sistema de arquivos

Gerar ícone dinamicamente

A ideia é do @iconify/tailwind, obrigado ao autor do Iconify pelo excelente trabalho!

Se você deseja instalar @iconify/json e usar qualquer ícone que desejar, você deve adicionar outro plugin ao seu tailwind.config.js .

Isso ocorre porque não podemos fornecer preenchimento automático para todos os ícones de @iconify/json , isso tornará seu editor lento.

 const { iconsPlugin , dynamicIconsPlugin } = require ( "@egoist/tailwindcss-icons" )

module . exports = {
  plugins : [ iconsPlugin ( ) , dynamicIconsPlugin ( ) ] ,
}

Então você pode usar ícones dinamicamente como <span class="i-[mdi-light--home]"></span> .

Patrocinadores

Licença

MIT © EGOIST