Vue 3 (Vite) — Inline SVGs as Components

In modern Vue apps, the cleanest way to use icons is to import SVG files as Vue components. In this guide, you’ll export minified SVGs from Axialis IconVectors with currentColor paints, set up vite-svg-loader for Vite, and theme icons via CSS while keeping bundles small.

Export a clean, themable SVG from IconVectors

1. Open or create your icon:
   • File → Open… (Ctrl+O) or New Icon (Ctrl+N).
   • Set fills/strokes to currentColor so the icon inherits CSS/text color in Vue.

   

Install & configure vite-svg-loader

1. Install

   npm i -D vite-svg-loader
   # or: pnpm add -D vite-svg-loader
   # or:  yarn add -D vite-svg-loader

2. Configure vite.config.ts

   import { defineConfig } from 'vite'
   import vue from '@vitejs/plugin-vue'
   import svgLoader from 'vite-svg-loader'
   
   export default defineConfig({
     plugins: [
       vue(),
       svgLoader({
         // Use SVGO and keep viewBox; strip width/height so CSS controls size
         svgo: true,
         svgoConfig: {
           plugins: [
             { name: 'preset-default', params: { overrides: { removeViewBox: false } } },
             'removeDimensions',
             'prefixIds' // avoid ID collisions if your SVG uses ids/gradients
           ]
         },
         defaultImport: 'component' // allow: import Icon from './icon.svg'
       })
     ]
   })

3. Add TypeScript types (project root)

   // env.d.ts
   /// <reference types="vite/client" />
   declare module '*.svg' {
     import type { DefineComponent } from 'vue'
     const component: DefineComponent
     export default component
   }
   declare module '*.svg?component' {
     import type { DefineComponent } from 'vue'
     const component: DefineComponent
     export default component
   }

Import SVG as a Vue component & theme with CSS

1. Inline component import

   <!-- src/components/SaveButton.vue -->
   <script setup lang="ts">
   import CheckIcon from '@/icons/check.svg'  // because defaultImport: 'component'
   </script>
   
   <template>
     <button class="inline-flex items-center gap-2 text-emerald-600 hover:text-emerald-700">
       <CheckIcon class="w-5 h-5" aria-hidden="true" />
       Save
     </button>
   </template>

   Theming: Because your SVG uses currentColor, the icon adopts the button’s text color. Change color with a class or inline style (e.g., style="color:#2563eb").

2. Alternate import with query

   <script setup lang="ts">
   import CheckIcon from '@/icons/check.svg?component'
   </script>

Project structure & tree‑shaking

• Import icons where used (e.g., import Icon from '@/icons/x.svg') so unused files aren’t bundled.
• Barrels (icons/index.ts) are fine if they don’t add side effects. Keep them pure to preserve tree‑shaking.
• IDs/gradients — if SVGs contain id=, clipPath, or gradients, keep prefixIds enabled to avoid collisions when multiple icons are on the page.

Troubleshooting

• Icon won’t change color — ensure your SVG paths use fill="currentColor"/stroke="currentColor" instead of hard‑coded hex colors.
• “Cannot find module ‘*.svg’” — add the TypeScript module declarations shown above.
• ViewBox missing — keep viewBox by disabling SVGO’s removeViewBox and removing explicit width/height (done in the config).