Rezept

Nuxt

glyphfox/vue rendert auf dem Server und hydriert im Browser, daher funktionieren Icons in Nuxt-Seiten, Layouts und Komponenten ohne zusätzliche Build-Konfiguration.

Explizite Imports

components/AppHeader.vue

<script setup>
import { HomeIcon, BellIcon, MorphIcon } from 'glyphfox/vue';
const open = ref(false);
</script>

<template>
  <header>
    <HomeIcon :size="20" class="logo" />
    <BellIcon animate="shake" trigger="hover" />
    <button @click="open = !open">
      <MorphIcon :name="open ? 'x' : 'menu'" />
    </button>
  </header>
</template>

Explizite Imports bringen nur die Icons ins Bundle, die du nutzt, und brauchen keine Nuxt-Konfiguration. build.transpile ist nicht nötig: Das Paket wird als reines ESM ausgeliefert.

Automatisch importierte Komponenten

modules/glyphfox.ts

import { addComponent, defineNuxtModule } from '@nuxt/kit';

const icons = ['HomeIcon', 'BellIcon', 'FileIcon', 'Icon', 'Fusion', 'MorphIcon'];

export default defineNuxtModule({
  setup() {
    for (const name of icons) addComponent({ name, export: name, filePath: 'glyphfox/vue' });
  },
});

Ein kleines lokales Modul (Dateien in modules/ werden automatisch geladen) registriert die Komponenten deiner Wahl, sodass Templates <HomeIcon /> ohne Import nutzen können und Nuxt trotzdem nur die einbindet, die eine Seite verwendet.

Namen beim Server-Rendering

plugins/glyphfox.ts

import { registerIcons } from 'glyphfox/vue';
import { iconCloud, iconLock, iconUser } from 'glyphfox';

export default defineNuxtPlugin(() => {
  registerIcons([iconCloud, iconLock, iconUser]);
});

Icon-Komponenten registrieren sich selbst. Namen, die nur als Strings vorkommen, in <Icon name="cloud" />, morphTo oder Fusion, werden im Browser bei Bedarf geladen; registriere sie in einem Plugin, damit das Server-Rendering sie schon enthält.

Tailwind CSS

assets/css/main.css

@import "tailwindcss";
@plugin "glyphfox/tailwind";

Mit dem Tailwind-Plugin zeichnet <span class="gf-home size-5 text-orange-500"></span> ein Icon als CSS-Maske, was gut zu langen statischen Listen passt.