Recette

Nuxt

glyphfox/vue fait le rendu côté serveur et s'hydrate dans le navigateur : les icônes fonctionnent donc dans les pages, layouts et composants Nuxt sans configuration de build supplémentaire.

Imports explicites

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>

Les imports explicites ne gardent dans le bundle que les icônes que vous utilisez et ne demandent aucune configuration Nuxt. build.transpile est inutile : le paquet est livré en ESM pur.

Composants importés automatiquement

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' });
  },
});

Un petit module local (les fichiers de modules/ se chargent automatiquement) enregistre les composants de votre choix : les templates peuvent alors utiliser <HomeIcon /> sans import, et Nuxt n'ajoute toujours que ceux qu'utilise une page.

Noms pendant le rendu côté serveur

plugins/glyphfox.ts

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

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

Les composants d'icône s'enregistrent d'eux-mêmes. Les noms qui n'apparaissent que sous forme de chaînes, dans <Icon name="cloud" />, morphTo ou Fusion, se chargent à la demande dans le navigateur ; enregistrez-les dans un plugin pour que le rendu côté serveur les contienne déjà.

Tailwind CSS

assets/css/main.css

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

Avec le plugin Tailwind, <span class="gf-home size-5 text-orange-500"></span> dessine une icône sous forme de masque CSS, ce qui convient aux longues listes statiques.