Nuxt UI Pro v1.0 is out with 50+ Vue components.

nuxt-svgo-loader

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

Nuxt Svgo Loader

npm versionnpm downloadsLicenseNuxt

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.

# 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.

Usage

Component

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

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

URL

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

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

Raw

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

import nuxtSvgRaw from '~/assets/svg/nuxt.svg?raw'
// 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:

import NuxtSvgWithoutOptimizer from '~/assets/svg/nuxt.svg?skipsvgo'
// <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