Vite Svelte SVG

Vite 3.x plugin to transform SVGs into Svelte components.

It also optimizes your SVGs by running them thru svgo.

<script>
  import MyIcon from '$lib/assets/my-icon.svg?component';
  // or import MyIcon from '$lib/assets/my-icon.svg?c';
</script>

<MyIcon width={42} height={42} />

Install

NPM

npm install vite-plugin-svelte-svg --save-dev

Yarn

yarn add -D vite-plugin-svelte-svg

pnpm

pnpm add -D vite-plugin-svelte-svg

Setup

vite.config.js

import svelteSVG from "vite-plugin-svelte-svg";

export default {
  plugins: [
    svelteSVG({
      svgoConfig: {}, // See https://github.com/svg/svgo#configuration
      requireSuffix: true, // Set false to accept '.svg' without the '?component'
    }),
  ],
};

Credits

This plugin is based on the work from the following projects:

• https://github.com/codefeathers/rollup-plugin-svelte-svg
• https://github.com/visualfanatic/vite-svg

License

MIT