nuxt-svgo

nuxt-svgo

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

Try it on StackBlitz!

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.ts
import { 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.

Webpack

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.ts
import { defineNuxtConfig } from 'nuxt'

export default defineNuxtConfig({
  modules: ['nuxt-svgo'],
  svgo: {
    svgoConfig: {
      multipass: true,
      removeViewBox: false,
      plugins: [
        {
          name: 'preset-default',
          params: {
            overrides: {
              // customize default plugin options
              inlineStyles: {
                onlyMatchedOnce: false
              },

              // or disable plugins
              removeDoctype: false
            }
          }
        }
      ]
    }
  }
})

Disable SVGO entirely:

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

export default defineNuxtConfig({
  modules: ['nuxt-svgo'],
  svgoOptions: {
    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.ts
declare 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

Copyright © 2022 Corey Psoinos.

This project is MIT licensed.

Changelog

1.0.1

Patch Changes

• #50 8819419 Thanks @cpsoinos! - Update compatibility to '^3.0.0-rc.0'