tailwindcss icons

? Vous pouvez aider l'auteur à devenir un mainteneur open source à plein temps en le parrainant sur GitHub.

---

@egoist/tailwindcss-icons

Utilisez n’importe quelle icône d’Iconify

Installer

npm i @egoist/tailwindcss-icons -D

Usage

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

Vous devez également installer @iconify/json (collections d'icônes complètes, 50 Mo) ou @iconify-json/{collection_name} (package d'icônes individuel) :

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

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

Ensuite, vous pouvez utiliser les icônes dans votre HTML :

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

Recherchez l'icône que vous souhaitez utiliser ici : https://icones.js.org

Conseil

Pour obtenir la liste complète des noms d'icônes sous forme de type dactylographié, vous pouvez vous référer à ce numéro.

Options du plugin

Option	Taper	Défaut	Description
préfixe	chaîne	i	Préfixe de classe pour les règles d'icônes correspondantes
échelle	nombre	1	Échelle par rapport à la taille de police actuelle
largeur de trait	nombre	undefined	Largeur de trait pour les icônes (cela peut ne pas fonctionner pour toutes les icônes)
extraPropriétés	Enregistrer<string, string>	{}	Propriétés CSS supplémentaires appliquées au CSS généré.
collectionNomsAlias	[clé dans CollectionNames]?: chaîne	{}	Alias ​​pour personnaliser les noms de collections.

Icônes personnalisées

Vous pouvez également utiliser des icônes personnalisées avec ce plugin, par exemple :

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

Ensuite, vous pouvez utiliser cette icône personnalisée comme nom de classe : i-foo-arrow-left .

Conseil

Pour lire les icônes personnalisées du répertoire, vous pouvez vous référer à Charger les svgs à partir du système de fichiers

Générer une icône dynamiquement

L'idée vient de @iconify/tailwind, merci à l'auteur d'Iconify pour son excellent travail !

Si vous souhaitez installer @iconify/json et utiliser l'icône de votre choix, vous devez ajouter un autre plugin à votre tailwind.config.js .

En effet, nous ne pouvons pas fournir de saisie semi-automatique pour toutes les icônes de @iconify/json , cela ralentira votre éditeur.

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

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

Ensuite, vous pouvez utiliser des icônes de manière dynamique comme <span class="i-[mdi-light--home]"></span> .

Commanditaires

Licence

MIT © ÉGOISTE