AstroIcon
Einfache SVG-Icons
Die AstroIcon-Komponente stellt einfache SVG-Icons bereit. Sie unterstützt derzeit die Icons 'mail', 'brand-linkedin' und 'arrow-right'.
Codebeispiel
<AstroIcon name="mail" size={24} /><AstroIcon name="brand-linkedin" size={32} /><AstroIcon name="arrow-right" size={20} class="text-primary" />Parameter
| Bezeichner | Typ | Beschreibung | Default |
|---|---|---|---|
| name | string | Name des Icons (mail, brand-linkedin, arrow-right) | - |
| size | number | Größe des Icons in Pixeln | 24 |
| class | string | Zusätzliche CSS-Klassen | - |
Verschiedene Größen
Icons in unterschiedlichen Größen
Die Größe der Icons kann über die size-Prop angepasst werden.
Codebeispiel
<AstroIcon name="mail" size={16} /><AstroIcon name="mail" size={24} /><AstroIcon name="mail" size={32} /><AstroIcon name="mail" size={48} /><AstroIcon name="mail" size={64} />Mit CSS-Klassen stylen
Farben und weitere Styles anwenden
Icons können mit CSS-Klassen gestylt werden, z.B. für Farben oder andere visuelle Anpassungen.
Codebeispiel
<AstroIcon name="mail" size={32} class="text-primary" /><AstroIcon name="mail" size={32} class="text-red-500" /><AstroIcon name="mail" size={32} class="text-blue-600" /><AstroIcon name="mail" size={32} class="text-green-500" /><AstroIcon name="mail" size={32} class="text-gray-400" />mail
brand-linkedin
arrow-right
Alle verfügbaren Icons
Übersicht aller unterstützten Icons
Die Komponente unterstützt derzeit drei Icons: mail, brand-linkedin und arrow-right.
Codebeispiel
<AstroIcon name="mail" size={32} /><AstroIcon name="brand-linkedin" size={32} /><AstroIcon name="arrow-right" size={32} />Praktische Anwendungsbeispiele
Icons in verschiedenen Kontexten
Beispiele für die Verwendung der Icons in Buttons, Links und anderen UI-Elementen.
Codebeispiel
<button class="flex items-center gap-2 px-4 py-2 bg-primary text-white rounded"><AstroIcon name="mail" size={20} />E-Mail senden</button>
<a href="#" class="flex items-center gap-2 text-primary hover:underline">LinkedIn Profil<AstroIcon name="brand-linkedin" size={18} /></a>
<a href="#" class="flex items-center gap-2 text-gray-700 hover:text-primary">Weiterlesen<AstroIcon name="arrow-right" size={16} class="text-primary" /></a>