Atinux / nuxt-svgo

SVGO loader for Nuxt

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

nuxt-svgo

npm version npm downloads license Twitter: CoreyPsoinos

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
  }
})

Development

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

Author

Corey Psoinos

Show your support

Give a ⭐️ if this project helped you!

📝 License

Copyright © 2022 Corey Psoinos.

This project is MIT licensed.

About

SVGO loader for Nuxt

License:MIT License


Languages

Language:TypeScript 83.4%Language:Vue 8.3%Language:Shell 8.2%