heroicons Download - heroicons Quellcode Download

heroicons

Anderer Quellcode

v2.2.0

Herunterladen

Schöne handgefertigte SVG-Ikonen, von den Machern von Rückenwind-CSS.
Erhältlich als grundlegende SVG-Symbole und über ERSTE-PARTY-Reaktions- und Vue-Bibliotheken.

Durchsuchen Sie bei Heroicons.com →

Grundnutzung

Der schnellste Weg, diese Symbole zu verwenden, besteht darin, einfach die Quelle für das Symbol zu kopieren, das Sie von Heroicons.com benötigen und sie direkt in Ihr HTML einbeziehen:

 <Svg
  class = "size-6 text-gray-500" fill = "none" viewbox = "0 0 24 24" STROKE = "CurrentColor" STRECE-WIDHTH = "2">
  <pathStroke-linecap = "Round" Stroke-linejoin = "Round" D = "M12 8v4L3 3M6-3A9 9 0 11-18 0 9 9 0 0118 0Z"
  /> </svg>

Beide Symbolstile sind vorkonfiguriert so, dass sie stilbar sind, indem die color -CSS-Eigenschaft entweder manuell oder die Nutzklassen wie text-gray-500 in einem Framework wie Rückenwind-CSS eingestellt werden.

Reagieren

Installieren Sie zuerst @heroicons/react von NPM: Reagieren Sie von NPM:

 npm install @heroicons/reagieren

Jetzt kann jedes Symbol als React -Komponente einzeln importiert werden:

 Importieren {Beakericon} aus '@heroicons/react/24/solide'function myComponent () {
  return (<Div> <beeakericon classname = "size-6 text-blue-500"/> <p> ... </p> </div>
  )}

Die 24x24 -Umriss -Symbole können von @heroicons/react/24/outline @heroicons/react/24/solid @heroicons/react/20/solid importiert werden. und 16x16 Solid -Symbole können aus @heroicons/react/16/solid importiert werden.

Symbole verwenden eine namende Konvention des oberen Kamels und sind immer mit dem Icon satt.

Durchsuchen Sie die vollständige Liste der Symbolnamen auf UNPKG →

Vue

Installieren Sie zuerst @heroicons/vue von NPM:

 npm install @heroicons/vue

Jetzt kann jedes Symbol als Vue -Komponente einzeln importiert werden:

 <Semplate>
  <div>
    <Beeakericon class = "size-6 text-blue-500" />
    <p> ... </p>
  </div>
</template> <script setup> import {beakericon} aus '@heroicons/vue/24/solide' </script>

Die 24x24 -Umriss -Symbole können von @heroicons/vue/24/outline @heroicons/vue/24/solid @heroicons/vue/20/solid importiert werden. und die 16x16 Solid -Symbole können von @heroicons/vue/16/solid importiert werden.

Symbole verwenden eine namende Konvention des oberen Kamels und sind immer mit dem Icon satt.

Durchsuchen Sie die vollständige Liste der Symbolnamen auf UNPKG →

Beitragen

Obwohl wir die Bereitschaft von jemandem, das Projekt zu verbessern, absolut zu schätzen wissen, interessieren wir uns derzeit nur für Beiträge, die Fehler beheben, beispielsweise Dinge wie falsche Typskriptypen oder ein Symbol, das mit einer Füllung anstelle eines Hubs usw. exportiert wurde.

Wir akzeptieren keine Beiträge für neue Symbole oder fügen Unterstützung für andere Frameworks wie Sufle oder SolidJs hinzu . Stattdessen ermutigen wir Sie, Ihre eigenen Symbole in Ihrer eigenen Bibliothek zu veröffentlichen und Ihre eigenen Pakete für alle anderen Frameworks zu erstellen, die Sie sehen möchten.