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';
</script>
<MyIcon width={42} height={42} />
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
const svelteSVG = require("vite-plugin-svelte-svg");
module.exports = {
kit: {
vite: {
plugins: [
svelteSVG({
svgoConfig: {}, // See https://github.com/svg/svgo#configuration
requireSuffix: true, // Set false to accept '.svg' without the '?component'
}),
],
},
},
};
This plugin is based on the work from the following projects:
MIT