Recipe

Nuxt

glyphfox/vue renders on the server and hydrates in the browser, so icons work in Nuxt pages, layouts and components without extra build configuration.

Explicit 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>

Explicit imports keep only the icons you use in the bundle, and need no Nuxt configuration. build.transpile is not needed: the package ships plain ESM.

Auto imported components

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

A small local module (files in modules/ load automatically) registers the components you choose, so templates can use <HomeIcon /> without an import and Nuxt still adds only the ones a page uses.

Names during server rendering

plugins/glyphfox.ts

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

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

Icon components register themselves. Names that only appear as strings, in <Icon name="cloud" />, morphTo or Fusion, load on demand in the browser; register them in a plugin so the server render already contains them.

Tailwind CSS

assets/css/main.css

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

With the Tailwind plugin, <span class="gf-home size-5 text-orange-500"></span> draws an icon as a CSS mask, which suits long static lists.