tailwindcss icons herunterladen - tailwindcss icons Quellcode herunterladen

tailwindcss icons

Anderer Quellcode

v1.8.1

Herunterladen

? Sie können dem Autor helfen, ein Vollzeit-Open-Source-Betreuer zu werden, indem Sie ihn auf GitHub sponsern.

@egoist/tailwindcss-icons

Verwenden Sie ein beliebiges Symbol von Iconify

Vorschau

Installieren

npm i @egoist/tailwindcss-icons -D

Verwendung

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

Sie müssen außerdem @iconify/json (vollständige Symbolsammlungen, 50 MB) oder @iconify-json/{collection_name} (einzelnes Symbolpaket) installieren:

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

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

Dann können Sie die Symbole in Ihrem HTML verwenden:

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

Suchen Sie hier nach dem Symbol, das Sie verwenden möchten: https://icones.js.org

Tipp

Um die vollständige Liste der Symbolnamen als TypeScript-Typ zu erhalten, können Sie sich auf dieses Problem beziehen.

Plugin-Optionen

Option	Typ	Standard	Beschreibung
Präfix	Zeichenfolge	`i`	Klassenpräfix für übereinstimmende Symbolregeln
Skala	Nummer	`1`	Skaliert relativ zur aktuellen Schriftgröße
Strichbreite	Nummer	`undefined`	Strichstärke für Symbole (dies funktioniert möglicherweise nicht für alle Symbole)
extraProperties	Record<string, string>	`{}`	Zusätzliche CSS-Eigenschaften, die auf das generierte CSS angewendet werden.
SammlungsnamenAlias	[Schlüssel in CollectionNames]?: string	`{}`	Alias zum Anpassen von Sammlungsnamen.

Benutzerdefinierte Symbole

Sie können mit diesem Plugin auch benutzerdefinierte Symbole verwenden, zum Beispiel:

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

Dann können Sie dieses benutzerdefinierte Symbol als Klassennamen verwenden: i-foo-arrow-left .

Tipp

Informationen zum Lesen benutzerdefinierter Symbole aus dem Verzeichnis finden Sie unter SVGs aus Dateisystem laden

Symbol dynamisch generieren

Die Idee stammt von @iconify/tailwind, vielen Dank an den Autor von Iconify für die tolle Arbeit!

Wenn Sie @iconify/json installieren und das gewünschte Symbol verwenden möchten, sollten Sie Ihrer tailwind.config.js ein weiteres Plugin hinzufügen.

Dies liegt daran, dass wir nicht für alle Symbole von @iconify/json eine automatische Vervollständigung bereitstellen können, da dies Ihren Editor verlangsamt.

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

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