`nuxt-svgo`

nuxt-svgo is a Nuxt module to load optimized SVG files as Vue components.

Install

Using `npm`

npm install nuxt-svgo --save-dev

Using `yarn`

yarn add nuxt-svgo -D

Using `pnpm`

pnpm add nuxt-svgo -D

Usage

Use the default configuration by adding 'nuxt-svgo' to the modules section of your Nuxt config.

// nuxt.config.tsimport { defineNuxtConfig } from 'nuxt'export default defineNuxtConfig({  modules: ['nuxt-svgo']})

Then, in any .vue file, import your asset and use it as a component:

<script setup lang="ts">import IconHome from '~/assets/icon-home.svg'</script><template>  <div>    <IconHome class="w-5 h-5" />  </div></template>

How it works

Vite

If your Nuxt app uses Vite, this module adds vite-svg-loader to the underlying Vite configuration. All due credit for vite-svg-loader to its author, @jpkleemans.

If your Nuxt app uses Webpack, this module adds vue-svg-loader and svgo-loader to the underlying Webpack configuration. As discussed in this issue, vue-svg-loader uses version 1 of SVGO. vue-svg-loader looks to be unmaintained, with the latest beta release more than 2 years old. We disable the SVGO functionality of vue-svg-loader, instead relying on svgo-loader to perform optimizations, essentially making vue-svg-loader wrap the svg content in <template></template> tags.

All due credit for vue-svg-loader to its author, @damianstasik. All due credit for svgo-loader to its author, @svg.

Configuration

Use your own custom SVGO options:

// nuxt.config.tsimport { defineNuxtConfig } from 'nuxt'export default defineNuxtConfig({    svgo: {    svgoConfig: {      multipass: true,      plugins: [        {          name: 'preset-default',          params: {            overrides: {              // customize default plugin options              inlineStyles: {                onlyMatchedOnce: false              },              // or disable plugins              removeDoctype: false,              removeViewBox: false            }          }        }      ]    }  }})

Disable SVGO entirely:

// nuxt.config.tsimport { defineNuxtConfig } from 'nuxt'export default defineNuxtConfig({    svgo: {    svgo: false  }})

Usage with TypeScript

When importing a SVG component in TypeScript, you will get a "Cannot find module" error. In order to fix thix, you need to provide a type declaration to tell TypeScript how to handle SVG components. Here's an example, using a custom.d.ts file at the application's root:

// custom.d.tsdeclare module '*.svg' {  import type { DefineComponent } from 'vue'  const component: DefineComponent  export default component}

Development

Run pnpm dev:prepare to generate type stubs.
Use pnpm dev to start playground in development mode.

Author

Corey Psoinos

Twitter: @CoreyPsoinos
Github: @cpsoinos

Show your support

Give a ⭐️ if this project helped you!

📝 License

This project is MIT licensed.