{"library":"nuxt-svgo","title":"Nuxt SVGO","description":"Nuxt SVGO is a Nuxt 3 module designed to integrate optimized SVG files directly into Vue applications as components. Currently at version 4.2.6, the library maintains a consistent release cadence, primarily focusing on compatibility with the latest Nuxt monorepo updates. Feature additions, such as Nuxt 3 layers support (v4.2.0) and type declaration generation for Vite (v4.1.0), are rolled out periodically. Its key differentiation lies in seamlessly combining SVGO's optimization capabilities with Nuxt's component system, allowing developers to import `.svg` files directly as Vue components or leverage an auto-import mechanism. It offers flexibility through options for custom import paths, component prefixes, and controlling global registration, effectively addressing concerns about bundle size with a large number of icons. This module simplifies SVG asset management by transforming raw SVG files into optimized, ready-to-use Vue components within the Nuxt ecosystem.","language":"javascript","status":"active","last_verified":"Sun Apr 19","install":{"commands":["npm install nuxt-svgo"],"cli":null},"imports":["import IconName from '~/assets/icons/icon-name.svg'","<template><SvgoName /></template>","import { defineNuxtConfig } from 'nuxt'; modules: ['nuxt-svgo']"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"<!-- nuxt.config.ts -->\n<script setup lang=\"ts\">\n  import { defineNuxtConfig } from 'nuxt'\n\n  export default defineNuxtConfig({\n    modules: ['nuxt-svgo'],\n    svgo: {\n      autoImportPath: './assets/icons/', // Default path for auto-import\n      componentPrefix: 'Svgo',          // Default prefix for auto-imported components\n      global: true,                     // Register components globally by default\n    },\n  })\n</script>\n\n<!-- app.vue -->\n<template>\n  <div class=\"p-8 font-sans\">\n    <h1 class=\"text-2xl font-bold mb-4\">Nuxt SVGO Demo</h1>\n    \n    <div class=\"flex items-center space-x-4 mb-4\">\n      <p>Direct Import:</p>\n      <!-- Assumes ~/assets/icons/home.svg exists -->\n      <IconHome class=\"text-red-500 w-8 h-8\" />\n      <IconHome class=\"text-blue-500 w-12 h-12\" :fontControlled=\"false\" />\n    </div>\n\n    <div class=\"flex items-center space-x-4\">\n      <p>Auto-Import (Vite style):</p>\n      <!-- Assumes ~/assets/icons/star.svg exists, named SvgoStar with default prefix -->\n      <SvgoStar class=\"text-green-500 w-10 h-10\" />\n      <svgo-star class=\"text-yellow-500 w-14 h-14\" />\n    </div>\n  </div>\n</template>\n\n<script setup lang=\"ts\">\n  // For direct import, assuming '~/assets/icons/home.svg' exists\n  import IconHome from '~/assets/icons/home.svg';\n  // For auto-import (e.g., SvgoStar), no explicit import is needed in the script.\n  // It's globally registered or tree-shaken by Nuxt/Vite based on config.\n</script>\n\n<style>\n  /* Add basic tailwind-like classes for demonstration if not using actual Tailwind */\n  .p-8 { padding: 2rem; }\n  .font-sans { font-family: ui-sans-serif, system-ui, sans-serif; }\n  .text-2xl { font-size: 1.5rem; line-height: 2rem; }\n  .font-bold { font-weight: 700; }\n  .mb-4 { margin-bottom: 1rem; }\n  .flex { display: flex; }\n  .items-center { align-items: center; }\n  .space-x-4 > :not([hidden]) ~ :not([hidden]) { margin-left: 1rem; }\n  .w-8 { width: 2rem; }\n  .h-8 { height: 2rem; }\n  .w-12 { width: 3rem; }\n  .h-12 { height: 3rem; }\n  .w-10 { width: 2.5rem; }\n  .h-10 { height: 2.5rem; }\n  .w-14 { width: 3.5rem; }\n  .h-14 { height: 3.5rem; }\n  .text-red-500 { color: #ef4444; }\n  .text-blue-500 { color: #3b82f6; }\n  .text-green-500 { color: #22c55e; }\n  .text-yellow-500 { color: #facc15; }\n</style>\n\n<!-- Create these files in your project:\n  ~/assets/icons/home.svg\n  <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z\"/></svg>\n\n  ~/assets/icons/star.svg\n  <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M12 .587l3.668 7.568 8.332 1.21-6.001 5.85 1.416 8.283L12 18.897l-7.415 3.901 1.416-8.283-6.001-5.85 8.332-1.21z\"/></svg>\n-->","lang":"typescript","description":"Demonstrates how to configure nuxt-svgo and use both direct SVG file imports as Vue components, and auto-imported SVG components (Vite-style) in a Nuxt 3 application, showing different sizing options and requiring example SVG files.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}