--- # Nuxt-Compose-Icons This module generates fully customizable Vue components from your initial raw SVG files at build time, and gives you: - 🧩 The flexibility of raw SVG - 🎨 Theming control: - At build time via configuration - At runtime via CSS variables - 🏔 ️Native Nuxt auto-import support For building design systems or simply use in-house icons. Used in production at [reteach](https://www.reteach.com/) --- ## 📦 Installation Using pnpm: ```bash pnpm add nuxt-compose-icons ``` Using npm ```bash npm install nuxt-compose-icons ``` Using yarn ```bash yarn add nuxt-compose-icons ``` --- ## 🛠 Quick start **1. Add to `nuxt.config.ts`:** ```ts export default defineNuxtConfig({ modules: ['nuxt-compose-icons'], composeIcons: { pathToIcons: './assets/icons', }, }); ``` **2. Drop your SVGs in `./assets/icons`** **3. Use them anywhere — no imports needed:** ```vue ``` That's it. Every `.svg` becomes a typed, auto-imported Vue component. --- ## 🎯 Motivation Existing icon solutions often force trade-offs between DX, accessibility, and flexibility: 1. **Third-party libraries** → limited customization 2. **Manual Vue components** → repetitive and hard to scale 3. **SVG loaders** → flexible but lack structure and typing Nuxt also has an excellent official icon module, [`@nuxt/icon`](https://github.com/nuxt/icon) — for a huge, ready-made icon set with zero setup, use it. This module solves a different problem: turning **your own** SVG files into **standalone, ownable Vue components**, for a design system or an in-house icon library, without the trade-offs above. → Full writeup: [Motivation](https://nuxt-icons.use-compose.com/guide/motivation) · [Common Approaches](https://nuxt-icons.use-compose.com/guide/concept#common-approaches) · [How this compares to `@nuxt/icon`](https://nuxt-icons.use-compose.com/guide/features#how-this-compares-to-nuxt-icon) --- ## Features - **SVG to Vue Component at build time** — one component per `.svg` file, named in PascalCase or kebab-case with optional prefix/suffix - **Auto-registered in Nuxt** — no manual imports, type-safe usage in `