Caution
This package is DEPRECATED. Svelte supports importing SVGs natively now. See: https://svelte.dev/playground/86553af5c35449ab88e34f1e50eb298f?version=5.30.1
Import SVG files as Svelte Components
Note:
rollup-plugin-svelte-svgwas rewritten from scratch recently, and no longer exposes Svelte options({ dev, generate })since we now delegate compilation to the Svelte plugin that's loaded after us. You should remove these options since they have no effect.This is a nonbreaking change for most users, however if you do face a problem, raise an issue.
# using npm
npm i -D rollup-plugin-svelte-svg
# using yarn
yarn add -D rollup-plugin-svelte-svg
# using pnpm
pnpm i -D rollup-plugin-svelte-svgSimply call svelteSVG before svelte in your rollup config.
// rollup.config.js
import { svelteSVG } from "rollup-plugin-svelte-svg";
export default {
entry: "src/input.js",
dest: "dist/output.js",
plugins: [
svelteSVG({
// optional SVGO options
// pass empty object to enable defaults
svgo: {}
}),
],
...
}// rollup.config.js
import { svelteSVG } from "rollup-plugin-svelte-svg";
export default {
client: {
plugins: [
svelteSVG({
// optional SVGO options
// pass empty object to enable defaults
svgo: {},
}),
],
...
},
server: {
plugins: [
svelteSVG({
// optional SVGO options
// pass empty object to enable defaults
svgo: {}
}),
],
...
},
}// vite.config.js
import { defineConfig } from "vite";
import { svelteSVG } from "rollup-plugin-svelte-svg";
export default defineConfig({
...
plugins: [
svelteSVG({
// optional SVGO options
// pass empty object to enable defaults
svgo: {},
// vite-specific
// https://vitejs.dev/guide/api-plugin.html#plugin-ordering
// enforce: 'pre' | 'post'
enforce: "pre",
}),
...
],
});You can then import svg in your JS thusly:
<script>
import Logo from "./logo.svg";
</script>
<Logo width=20 />-
This plugin was originally forked from antony/rollup-plugin-svg, but has been rewritten since.
-
@featherbear's fork and metafy-gg's fork inspired svgo optimisation and vite support.
MIT