@juit/vite-plugin-vue-svg v1.0.2

SVG support for Vue/Vite (with TypeScript!)

This plugin allows SVG images to be used as Vue components.

This plugin was heavily inspired by vite-plugin-vue-svg from which it boorrows its idea, overall structure, and integration with svgo.

Install

If you're using npm then:

npm install --save-dev '@juit/vite-plugin-vue-svg'

Setup

Simply add the plugin to your vite.config.ts as follows:

import vue from '@vitejs/plugin-vue'
import vueSvg from '@juit/vite-plugin-vue-svg'

// See https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    vueSvg(/* ... svgo options ... */),
  ],
})

The plugin can be configured with any svgo options.

Types

For types to be working correctly, reference our component definition in any of your .d.ts files:

/// <reference types="@juit/vite-plugin-vue-svg/client" />

Or simply add a couple of definition for *.svg?component and *.svg?component-raw modules:

declare module '*.svg?component' {
  const component: { render: Function }
  export default component
}

declare module '*.svg?component-raw' {
  const component: { render: Function }
  export default component
}

Usage

Simply import the SVG file using the .svg?component extension and use it in your .vue file:

<template>
  <div>
    <svg-image />
  </div>
</template>

<script>
import svgImage from './asset/image.svg?component'

export default {
  components: {
    svgImage,
  },
};
</script>

If you prefer to skip the svgo optimization all together (useful for example when preserving clipPaths within defs) simply import your file as image.svg?component-raw.

License

Licensed under the Apache License, Version 2.0.