Receita

Nuxt

O glyphfox/vue renderiza no servidor e hidrata no navegador, então os ícones funcionam em páginas, layouts e componentes do Nuxt sem configuração extra de build.

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>

Com imports explícitos, só os ícones que você usa entram no bundle, e não é preciso configurar nada no Nuxt. build.transpile não é necessário: o pacote vem em ESM puro.

Componentes importados automaticamente

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

Um pequeno módulo local (os arquivos em modules/ carregam automaticamente) registra os componentes que você escolher, assim os templates podem usar <HomeIcon /> sem import e o Nuxt continua incluindo só os que cada página usa.

Nomes na renderização no servidor

plugins/glyphfox.ts

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

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

Os componentes de ícone se registram sozinhos. Nomes que só aparecem como strings, em <Icon name="cloud" />, morphTo ou Fusion, carregam sob demanda no navegador; registre-os em um plugin para que a renderização no servidor já os contenha.

Tailwind CSS

assets/css/main.css

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

Com o plugin do Tailwind, <span class="gf-home size-5 text-orange-500"></span> desenha um ícone como máscara CSS, o que combina com listas estáticas longas.