Nuxt Svgo Loader

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

Features

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

Installation

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

1npx nuxi@latest module add nuxt-svgo-loader

1export default defineNuxtConfig({
2  modules: ['nuxt-svgo-loader'],
3  svgoLoader: {
4    // Options here will be passed to `vite-svg-loader`
5  }
6})

[!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.

Usage

Component

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

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

URL

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

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

Raw

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

1import nuxtSvgRaw from '~/assets/svg/nuxt.svg?raw'
2// nuxtSvgRaw === '<svg xmlns="http://www.w3.org/2000/svg" ...'

Skip SVGO for a single file

SVGO can be explicitly disabled for one file by adding the ?skipsvgo suffix:

1import NuxtSvgWithoutOptimizer from '~/assets/svg/nuxt.svg?skipsvgo'
2// <NuxtSvgWithoutOptimizer />

DevTools

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

License

MIT License © 2023-PRESENT Alex Liu