rollup-plugin-svelte-svg

Import SVG files as Svelte Components

Note: rollup-plugin-svelte-svg was 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.

Contents

• Installation
• Usage
  • Svelte
  • Sapper
  • Vite
• Credits
• License

Installation

1# using npm
2npm i -D rollup-plugin-svelte-svg
3
4# using yarn
5yarn add -D rollup-plugin-svelte-svg
6
7# using pnpm
8pnpm i -D rollup-plugin-svelte-svg

Usage

Simply call svelteSVG before svelte in your rollup config.

Svelte

1// rollup.config.js
2import { svelteSVG } from "rollup-plugin-svelte-svg";
3
4export default {
5    entry: "src/input.js",
6    dest: "dist/output.js",
7    plugins: [
8        svelteSVG({
9            // optional SVGO options
10            // pass empty object to enable defaults
11            svgo: {}
12        }),
13    ],
14    ...
15}

Sapper

1// rollup.config.js
2import { svelteSVG } from "rollup-plugin-svelte-svg";
3
4export default {
5    client: {
6        plugins: [
7            svelteSVG({
8                // optional SVGO options
9                // pass empty object to enable defaults
10                svgo: {},
11            }),
12        ],
13        ...
14    },
15    server: {
16        plugins: [
17            svelteSVG({
18                // optional SVGO options
19                // pass empty object to enable defaults
20                svgo: {}
21            }),
22        ],
23        ...
24    },
25}

Vite

1// vite.config.js
2import { defineConfig } from "vite"; 
3import { svelteSVG } from "rollup-plugin-svelte-svg";
4
5export default defineConfig({
6    ...
7    plugins: [
8        svelteSVG({
9            // optional SVGO options
10            // pass empty object to enable defaults
11            svgo: {},
12            // vite-specific
13            // https://vitejs.dev/guide/api-plugin.html#plugin-ordering
14            // enforce: 'pre' | 'post'
15            enforce: "pre",
16        }),
17        ...
18    ],
19});

You can then import svg in your JS thusly:

1<script>
2	import Logo from "./logo.svg";
3</script>
4
5<Logo width=20 />

Credits

• 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.

License

MIT