HermeneusIcon

Die HermeneusIcon-Komponente bietet eine flexible und effiziente Möglichkeit, SVG-Icons in Vue 3-Anwendungen zu integrieren. Durch die Verwendung des IntersectionObserver API werden Icons nur geladen, wenn sie im Viewport sichtbar sind, was die Performance verbessert. Unterstützt werden sowohl TailwindCSS-Farbklassen als auch benutzerdefinierte Farbklassen, was eine breite Palette an Gestaltungsmöglichkeiten eröffnet.

Props

• name: String (erforderlich) - Der Name des zu ladenden Icons. Das SVG sollte im Verzeichnis public/img/svg vorhanden sein, benannt nach der Konvention {name}.svg.
• width, height: String | Number (optional) - Breite und Höhe des Icons in Pixeln. Standard ist 15.
• color: String (optional) - Die Farbe des Icons, angegeben als TailwindCSS-Farbklassenname oder als benutzerdefinierte Farbklasse. Der Standardwert ist current, was currentColor in CSS entspricht.
• viewbox: Number | String (optional) - Die viewBox-Eigenschaft des SVG. Standardmäßig nicht gesetzt.
• cache: Boolean (optional) - Gibt an, ob das Icon nach dem Laden gecacht werden soll. Standard ist true.

Computed Properties

• colorClass: Basierend auf dem color-Prop wird entschieden, welche Farbklasse angewendet wird. Unterstützt werden TailwindCSS-Farbklassen und benutzerdefinierte Farbklassen.

Beispiele

Standard-Icon:

<hermeneus-icon name="hi-texte"></hermeneus-icon>

Icon mit TailwindCSS-Farbe:

<hermeneus-icon name="hi-texte" color="text-gray-500"></hermeneus-icon>

Icon mit benutzerdefinierter Farbe:

<hermeneus-icon name="hi-texte" color="hi-color-puderrosa"></hermeneus-icon>

Die Klasse muss im Komponentenunterordner ./css/custom_colors.css definiert werden.

.hi-color-puderrosa * {
    fill: #aaa;
}

Icon mit benutzerdefinierter Größe:

<hermeneus-icon name="hi-texte" width="24" height="24" color="text-red-500"></hermeneus-icon>

Integration

Die Komponente ist global registriert.