Verwenden Sie Symbole aus Font Awesome, Lucide, SVGs, externen URLs oder Dateien in Ihrem Projekt, um Ihre Dokumentation aufzuwerten.
Icon-Beispiel
<Icon icon="flag" size={32} />

Inline-Icons

Icons werden inline platziert, wenn sie innerhalb eines Absatzes verwendet werden. Die Dokumentation, die Sie sich wünschen – mühelos.
Inline-Icon-Beispiel
<Icon icon="flag" iconType="solid" /> Die Dokumentation, die Sie sich wünschen – mühelos.

Eigenschaften

icon
string
required
Das anzuzeigende Icon.Optionen:
  • Name eines Font Awesome Icons
  • Name eines Lucide Icons
  • JSX-kompatibler SVG-Code, in geschweifte Klammern gesetzt
  • URL zu einem extern gehosteten Icon
  • Pfad zu einer Icon-Datei in Ihrem Projekt
Für benutzerdefinierte SVG-Icons:
  1. Konvertieren Sie Ihr SVG mit dem SVGR-Konverter.
  2. Fügen Sie Ihren SVG-Code in das SVG-Eingabefeld ein.
  3. Kopieren Sie das vollständige <svg>...</svg>-Element aus dem JSX-Ausgabefeld.
  4. Setzen Sie den JSX-kompatiblen SVG-Code in geschweifte Klammern: icon={<svg ...> ... </svg>}.
  5. Passen Sie height und width nach Bedarf an.
iconType
string
Der Iconstil für Font Awesome. Wird nur mit Font Awesome Icons verwendet.Optionen: regular, solid, light, thin, sharp-solid, duotone, brands.
color
string
Die Farbe des Icons als Hex-Farbcode (zum Beispiel #FF5733).
size
number
Die Größe des Icons in Pixel.