/vite-plugin-svelte-svg

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

Primary LanguageJavaScriptMIT LicenseMIT

Vite Svelte SVG

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

It also optimizes your SVGs by running them thru svgo.

npm

<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:

License

MIT