Heroicons: hochwertige Open-Source-Icons-Bibliothek 94

Heroicons ist eine hochwertige Open-Source-Icon-Bibliothek, die vom Tailwind CSS-Team und dem Refactoring UI-Team in unterschiedlichen Versionen gepflegt wird.

Heroicons eignet sich für die Web- und Anwendungsentwicklung. Alle Icons stehen unter der MIT-Lizenz, die es jeder Person erlaubt, sie kostenlos herunterzuladen und in privaten sowie kommerziellen Projekten zu verwenden.

Funktionsmerkmale von Heroicons

• Hochwertige SVG-Icons: Heroicons bietet klare, konsistente Icon-Designs, die für die UI-Entwicklung geeignet sind und Web- sowie App-Designs unterstützen.

• Zwei Stile: Enthält die Stile Outline (Kontur) und Solid (gefüllt), um unterschiedlichen Designanforderungen gerecht zu werden.

• Breite Einsatzmöglichkeiten: Die Icons decken gängige UI-Elemente und Geschäftsszenarien ab und eignen sich für Navigation, Aktionen, Statusanzeigen usw.

• Einfache Integration: Unterstützt die direkte Verwendung von SVG-Code in HTML sowie die Verwendung als Komponente in modernen Frontend-Frameworks wie React und Vue nach der Installation über npm.

• Versionsaktualisierungen: Mit jeder Versionsiteration wächst die Anzahl der Icons stetig, so enthält eine Version beispielsweise über 1200 Icons.

Verwendung von Heroicons

1. Installation:

• Für Frontend-Projekte kann die React- oder Vue-Bibliothek von Heroicons über npm oder Yarn installiert werden.

npm install @heroicons/react

# oder mit Yarn

yarn add @heroicons/react

2. Icons einbinden:

• Im Code können Sie Icons direkt importieren und verwenden, zum Beispiel:

import { BellIcon } from '@heroicons/react/24/outline';

function App() {

  return

}

3. SVG direkt verwenden:

• Sie können den SVG-Code auch direkt von der Heroicons-Website kopieren und in HTML verwenden.

4. Figma-Integration:

• Designer können das Figma-Plugin nutzen oder SVG-Dateien direkt für Designarbeiten herunterladen.

Heroicons bietet nicht nur Icons in verschiedenen Stilen, sondern unterstützt auch Icons in unterschiedlichen Größen, um unterschiedlichen Designanforderungen gerecht zu werden. Nutzer können je nach den spezifischen Anforderungen des Projekts Icons in verschiedenen Größen wie 24x24, 20x20 usw. auswählen. Darüber hinaus ist der Designstil der Heroicons-Icons schlicht und modern und eignet sich für verschiedene Arten von Anwendungen und Websites. Insbesondere in Kombination mit Tailwind CSS lassen sich bessere visuelle Effekte und ein verbessertes Nutzererlebnis erzielen.

Die Icon-Bibliothek von Heroicons wird kontinuierlich aktualisiert. Entwickler können die GitHub-Seite im Auge behalten, um die neuesten Icons und Funktionsupdates zu erhalten.

Github：https://github.com/tailwindlabs/heroicons