Nimble Pixie Merchant

    rollup-plugin-svelte-svg
    DefinitelyTyped icon, indicating that this package has TypeScript declarations provided by the separate @types/rollup-plugin-svelte-svg package

    1.0.0-beta.6 • Public • Published

    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

    # 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

    Simply call svelteSVG before svelte in your rollup config.

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

    You can then import svg in your JS thusly:

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

    Credits

    License

    MIT

    Install

    npm i rollup-plugin-svelte-svg

    DownloadsWeekly Downloads

    2,741

    Version

    1.0.0-beta.6

    License

    MIT

    Unpacked Size

    15 kB

    Total Files

    6

    Last publish

    Collaborators

    • mkrhere