nuxt-svgo

nuxt-svgo

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

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 svg-to-vue-component to the underlying Webpack configuration. All due credit for svg-to-vue-component to its author, @egoist.

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>

Configuration

Use your own custom SVGO options:

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

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

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.