nuxt-svgo

To add nuxt-svgo to your Nuxt project, use the Nuxt module add command:

npx nuxi@latest module add nuxt-svgo

After installing, add 'nuxt-svgo' to your modules array in nuxt.config.ts. You can then use SVGs in two ways:

1. Direct Import: Import the SVG file directly in a .vue file and use it as a component.
2. Auto-import (Vite only): Use the icon's name with the svgo prefix (e.g., SvgoHome or <svgo-home />). By default, it scans assets/icons/.

Note: By default, font size controls the width and height of the icon. You can disable this using the :fontControlled="false" prop.

// nuxt.config.ts
import { defineNuxtConfig } from 'nuxt'

export default defineNuxtConfig({
  modules: ['nuxt-svgo'],
})

// In a .vue file
<template>
  <div>
    <IconHome class="text-xl" />
    <IconHome class="w-5 h-5" :fontControlled="false" />
  </div>
</template>

<script setup lang="ts">
  import IconHome from '~/assets/icon-home.svg'
</script>

You can specify which directories are scanned for icons using the autoImportPath option in the svgo configuration. This accepts a single string path or an array of paths. All configured paths are scanned in the root app and in every Nuxt layer.

To disable auto-importing entirely, set autoImportPath to false.

// Single path
export default defineNuxtConfig({
  modules: ['nuxt-svgo'],
  svgo: {
    autoImportPath: './assets/other-icons/',
  },
})

// Multiple paths
export default defineNuxtConfig({
  modules: ['nuxt-svgo'],
  svgo: {
    autoImportPath: ['./assets/icons/', './assets/shapes/'],
  },
})

// Disable auto-import
export default defineNuxtConfig({
  modules: ['nuxt-svgo'],
  svgo: {
    autoImportPath: false,
  },
})

When using Vite, you can enable TypeScript declaration generation for SVG import queries by setting dts: true in your svgo configuration. This ensures that queries like import icon from './icon.svg?component' are correctly typed.

// nuxt.config.ts
export default defineNuxtConfig({
  svgo: {
    dts: true
  }
})

You can append specific queries to your SVG import statements to change how the file is loaded. Supported queries include:

• ?url: Uses the default SVG loader (returns a URL).
• ?url_encode: Returns the SVG as a data URI (encoded).
• ?raw: Returns the raw SVG string.
• ?raw_optimized: Returns the raw SVG string after SVGO optimization.
• ?component: Returns the SVG as a Vue component.
• ?skipsvgo: Returns the SVG without applying SVGO optimization.
• ?componentext: Returns a wrapper component that uses the customComponent (e.g., NuxtIcon) to render the SVG via its icon slot/prop.

import myIcon from './icon.svg?component'
import iconUrl from './icon.svg?url'
import iconRaw from './icon.svg?raw'
import iconDataUri from './icon.svg?url_encode'
import iconExt from './icon.svg?componentext'

If you do not provide a svgoConfig, the module uses a default configuration that includes the following plugins:

• preset-default
• removeDimensions
• prefixIds: A custom plugin that prefixes IDs in the SVG using a hash of the file path to prevent ID collisions.

export const defaultSvgoConfig: Config = {
  plugins: [
    'preset-default',
    'removeDimensions',
    {
      name: 'prefixIds',
      params: {
        prefix(_, info) {
          return 'i' + hashCode(info.path)
        },
      },
    },
  ],
}