gem-hunter

Caution

This package is DEPRECATED. Svelte supports importing SVGs natively now. See: https://svelte.dev/playground/86553af5c35449ab88e34f1e50eb298f?version=5.30.1

rollup-plugin-svelte-svg

Contents

Installation

# 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-svg

Usage

Svelte

// 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: {}
        }),
    ],
    ...
}

Sapper

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

// 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",
        }),
        ...
    ],
});

<script>
	import Logo from "./logo.svg";
</script>

<Logo width=20 />

Credits

License