snowpack-vue-svg-plugin

snowpack-vue-svg-plugin

A Snowpack plugin to load SVG files as Vue components.

Plugin has built-in SVGO support for SVG optimization.

yarn add -D snowpack-vue-svg-plugin
npm install --save-dev snowpack-vue-svg-plugin

// snowpack.config.mjs
export default {
  plugins: [
    'snowpack-vue-svg-plugin'
  ]
}

Usage

// Component.vue
<template>
  <Logo />
</template>

<script>
import Logo from '../assets/logo.svg'

export default {
  components: {
    Logo
  }
}
</script>

Plugin Options

input

If you already have a plugin registered to load .svg files and want to keep using it in parallel to this plugin, you should overwrite the default input option.

// snowpack.config.mjs
export default {
  plugins: [
    ['snowpack-vue-svg-plugin', {
      input: ['.vue.svg']
    }]
  ]
}

svgo and svgoConfig

// snowpack.config.mjs
export default {
  plugins: [
    ['snowpack-vue-svg-plugin', {
      svgo: true,
      svgoConfig: {
        multipass: true
      }
    }]
  ]
}