Nuxt Compose Icons

Appearance

Setup ​

1. Installation ​

Choose your package manager:

bash
pnpm add -D nuxt-compose-icons
bash
npm install -D nuxt-compose-icons
bash
yarn add -D nuxt-compose-icons

2. Register the module ​

ts
// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['nuxt-compose-icons'],
});

3. Provide icons ​

Point the module at a folder of .svg icons:

ts
// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['nuxt-compose-icons'],
  composeIcons: {
    pathToIcons: './assets/icons',
  },
});

4. Use your icons ​

vue
<template>
  <ArrowUpIcon />
  <user-badge-icon />
</template>

Next steps ​

→ See Configuration for naming, size classes, and advanced options.