/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