tailwindcss icons

? Puedes ayudar al autor a convertirse en mantenedor de código abierto a tiempo completo patrocinándolo en GitHub.

---

@egoísta/tailwindcss-icons

Utilice cualquier icono de Iconify

Instalar

npm i @egoist/tailwindcss-icons -D

Uso

En tu 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.
    } ) ,
  ] ,
}

También necesita instalar @iconify/json (colecciones de íconos completas, 50 MB) o @iconify-json/{collection_name} (paquete de íconos individuales):

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

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

Luego puedes usar los íconos en tu HTML:

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

Busque el ícono que desea usar aquí: https://icones.js.org

Consejo

Para obtener la lista completa de nombres de iconos en formato mecanografiado, puede consultar este número.

Opciones de complemento

Opción	Tipo	Por defecto	Descripción
prefijo	cadena	i	Prefijo de clase para reglas de iconos coincidentes
escala	número	1	Escala relativa al tamaño de fuente actual
trazoAncho	número	undefined	Ancho de trazo para íconos (es posible que esto no funcione para todos los íconos)
propiedades extra	Grabar<cadena,cadena>	{}	Propiedades CSS adicionales aplicadas al CSS generado.
colecciónNombresAlias	[clave en CollectionNames]?: cadena	{}	Alias ​​para personalizar los nombres de las colecciones.

Iconos personalizados

También puedes usar íconos personalizados con este complemento, por ejemplo:

 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 ,
            } ,
          } ,
        } ,
      } ,
    } ) ,
  ] ,
}

Luego puedes usar este ícono personalizado como nombre de clase: i-foo-arrow-left .

Consejo

Para leer íconos personalizados del directorio, puede consultar Cargar svgs desde el sistema de archivos

Generar icono dinámicamente

La idea es de @iconify/tailwind, ¡gracias al autor de Iconify por el gran trabajo!

Si desea instalar @iconify/json y usar el ícono que desee, debe agregar otro complemento a su tailwind.config.js .

Esto se debe a que no podemos proporcionar autocompletar para todos los íconos de @iconify/json , lo que hará que su editor sea lento.

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

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

Luego puede usar íconos dinámicamente como <span class="i-[mdi-light--home]"></span> .

Patrocinadores

Licencia

MIT © EGOÍSTA