IT Lab Icons

Eine flexible und typsichere Icon-Bibliothek für Vue 3, die die offiziellen Icons des IT Lab Hubs bündelt und zusätzlich allgemeine statische und dynamische Icons bereitstellt. Alle Icons sind als Vue-Komponenten verfügbar und können direkt in Templates verwendet werden.

Installation

pnpm add itlab-icons

Die Bibliothek ist vollständig tree-shakeable – es werden nur die Icons in das Bundle aufgenommen, die auch tatsächlich importiert werden.

Verwendung

Einfaches Beispiel

<template>
  <PersonIcon />
</template>

<script setup lang="ts">
import { PersonIcon } from 'itlab-icons';
</script>

• Alle Icons sind standardmäßig SVG-basierte Vue-Komponenten.
• Props wie class, style, width, oder height können direkt wie bei jeder Vue-Komponente gesetzt werden.

Props-Weitergabe

Da Icons reguläre Komponenten sind, lassen sie sich mit dynamischen Klassen und Styles kombinieren:

<template>
  <PersonIcon class="h-6 w-6 text-gray-600" />
</template>

Icon-Arten

Die Bibliothek unterscheidet zwischen drei Icon-Gruppen:

• App Icons: Logos der IT Lab Hub Dienste (z. B. AppNewsroomIcon, AppEventsicons).
• Static Icons: Statische Symbole, ohne Props (z. B. PersonIcon, EllipsisIcon).
• Dynamic Icons: Symbole, die über Props konfigurierbar sind. Aktuell verfügbar:
  • DocExtensionIcon → rendert dynamisch ein Dokument-Icon basierend auf der extension: string Prop. Darunter wird die Extension als Text angezeigt.

Utilities

createStyledIconRenderer

Eine Utility-Funktion zum Erstellen wiederverwendbarer, gestylter Icon-Renderer.

/**
 * Factory function that creates a Vue render function for an icon with custom styles applied.
 *
 * This function helps separate the creation of a styled icon renderer from the actual rendering process,
 * allowing reusable, configurable icon renderers to be easily composed.
 *
 * @param {Icon} icon - The icon component to be rendered.
 * @param {CSSProperties} style - CSS styles to apply to the icon.
 * @returns {() => VNode<RendererNode, RendererElement, Record<string, any>>} A Vue render function producing the styled icon vnode.
 */
export function createStyledIconRenderer(
  icon: Icon,
  style: CSSProperties,
): () => VNode<RendererNode, RendererElement, { [key: string]: any }> {
  // Return a function that Vue will call to render the icon with the provided styles
  return () => h<Icon>(icon, { style: style });
}

Beispiel

import { createStyledIconRenderer, PersonFillIcon } from 'itlab-icons';

const RedPersonFillIcon = createStyledIconRenderer(PersonFillIcon, { color: 'red' });

createColoredIconRenderer

Eine spezialisierte Version von createStyledIconRenderer, wenn nur die Farbe angepasst werden soll.

/**
 * Factory function that creates a Vue render function for an icon with a specified color.
 *
 * This is a specialized helper built on top of createStyledIconRenderer to quickly produce
 * an icon renderer with only a color style applied.
 *
 * @param {Icon} icon - The icon component to be rendered.
 * @param {string} color - The color to apply to the icon.
 * @returns {() => VNode<RendererNode, RendererElement, Record<string, any>>} A Vue render function producing the colorized icon vnode.
 */
function createColoredIconRenderer(
  icon: Icon,
  color: string,
): () => VNode<RendererNode, RendererElement, { [key: string]: any }>;

Beispiel

import { createStyledIconRenderer, PersonFillIcon } from 'itlab-icons';

const RedPersonFillIcon = createColoredIconRenderer(PersonFillIcon, 'red');

Typen

Icon

Die Bibliothek stellt den Typ Icon bereit, um Icons typsicher als Props oder Parameter zu verwenden.

import { type Icon, PersonIcon } from 'itlab-icons';

const icon: Icon = PersonIcon;

Beispiel

<template>
  <component :is="icon" class="h-6 w-6" />
</template>

<script setup lang="ts">
import type { Icon } from 'itlab-icons';

defineProps<{
  icon: Icon;
}>();
</script>