Receta

Nuxt

glyphfox/vue se renderiza en el servidor y se hidrata en el navegador, así que los iconos funcionan en páginas, layouts y componentes de Nuxt sin configuración de build adicional.

Imports explícitos

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>

Con imports explícitos, solo los iconos que usas entran en el bundle y no hace falta configurar Nuxt. build.transpile no es necesario: el paquete se distribuye como ESM puro.

Componentes importados automáticamente

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 pequeño módulo local (los archivos de modules/ se cargan automáticamente) registra los componentes que elijas, así las plantillas pueden usar <HomeIcon /> sin import y Nuxt sigue añadiendo solo los que usa cada página.

Nombres durante el renderizado en el servidor

plugins/glyphfox.ts

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

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

Los componentes de icono se registran solos. Los nombres que solo aparecen como strings, en <Icon name="cloud" />, morphTo o Fusion, se cargan bajo demanda en el navegador; regístralos en un plugin para que el renderizado en el servidor ya los incluya.

Tailwind CSS

assets/css/main.css

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

Con el plugin de Tailwind, <span class="gf-home size-5 text-orange-500"></span> dibuja un icono como máscara CSS, algo ideal para listas estáticas largas.