Nuxt Svgo Loader

Nuxt module to load SVG files as Vue components, using SVGO for optimization.


  • Load SVG files as Vue components.
  • Optimize SVGs using SVGO.
  • Seamless integration with Nuxt DevTools.


Install and add nuxt-svgo-loader to your nuxt.config.

# Whichever matches your package manager
pnpm add -D nuxt-svgo-loader
npm install -D nuxt-svgo-loader
yarn add -D nuxt-svgo-loader
export default defineNuxtConfig({
  modules: ['nuxt-svgo-loader'],
  svgoLoader: {
    // Options here will be passed to `vite-svg-loader`

[!NOTE] Since nuxt-svgo-loader is a Nuxt module based on vite-svg-loader, the configuration for svgoLoader remains identical to that of vite-svg-loader. You can refer to the documentation of vite-svg-loader for the available options here.



SVGs can be explicitly imported as Vue components using the ?component suffix:

import NuxtSvg from '~/assets/svg/nuxt.svg'
// <NuxtSvg />


SVGs can be imported as URLs using the ?url suffix:

import nuxtSvgUrl from '~/assets/svg/nuxt.svg?url'
// nuxtSvgUrl === '/_nuxt/assets/svg/nuxt.svg'


SVGs can be imported as raw strings using the ?raw suffix:

import nuxtSvgRaw from '~/assets/svg/nuxt.svg?raw'
// nuxtSvgRaw === '<svg xmlns="" ...'


This module adds a new tab to the Nuxt DevTools, which allows you to inspect the SVG files.


View Github