rollup-plugin-mxn-svg

Rollup plugin that imports SVG files as JSX components

Usage no npm install needed!

<script type="module">
  import rollupPluginMxnSvg from 'https://cdn.skypack.dev/rollup-plugin-mxn-svg';
</script>

README

rollup-plugin-mxn-svg

npm@latest Install size Downloads

A Rollup plugin that imports SVG files as JSX components.
It was forked by Ilya Zimnovich from rollup-plugin-svgi, originally written by Kuzivakwashe.

  • ~5.5kb size
  • ~2.5kb minified + gzipped

Purpose

This is a Rollup plugin for importing SVG as JSX components in Preact, React and other libraries.

Install

$ npm install --save-dev rollup-plugin-mxn-svg

Usage

Note. Use this plugin before any JSX ⇒ JS transformation plugins so JSX output from this plugin will be converted to regular JS calls.

Suppose an input file containing the snippet below exists at src/index.js, and attempts to load src/logo.svg as follows:

// src/index.js
import Logo from './logo.svg';

console.log(Logo);

Create a rollup.config.js configuration file and import the plugin:

// rollup.config.js
import rollupMxnSvg from "rollup-plugin-mxn-svg";
import rollupMxnJsx from "rollup-plugin-mxn-jsx";
// ... other imports, etc ...

export default {
    input: "src/index.js",
    // ...
    output: {
        file: "bundle/bundle.js",
        format: "iife"
    },
    plugins: [
        rollupMxnSvg({
            imports: "import {h} from \"preact\";",
            include: "*.svg"
        }),
        rollupMxnJsx({
            factory: "h",
            include: ["*.js", "*.jsx", "*.svg"]
        }),
        // ... other plugins, etc ...
    ]
};

Then call rollup either via the CLI or the API.

Options

This plugin has the following configuration options:

Property Description Default
imports A string or array with import statements that will be inserted at the beginning of the resulting file. "import {h} from \"preact\";"
include This property specifies which files to include. It is a single glob pattern, or an array of them. "*.svg"
exclude This property is the same as include, except it specifies which files to exclude.
It is a single glob pattern, or an array of them.
undefined
prepend The string to prepend to include and exclude entries "**/"
clean The function used to clean up & prepare an SVG file for inlining. It removes the DOCTYPE, XML declaration, comments and namespaced attributes and has a (rawSVG) => string or (rawSVG) => Promise<string> function signature. function

Examples

// src/main.js
import { h } from "preact"; // OR import React from "react";
import Logo from "path/to/logo.svg";

export default () => (
  <div class="App">
    <div class="App-header">
      <Logo class="App-logo" />
    </div>
  </div>
);
// rollup.config.js
import rollupMxnSvg from "rollup-plugin-mxn-svg";
import rollupMxnJsx from "rollup-plugin-mxn-jsx";
// ... other imports, etc ...

export default {
    input: "src/main.js",
    // ...
    plugins: [
        rollupMxnSvg({
            imports: "import {h} from \"preact\";",
            include: "*.svg"
        }),
        rollupMxnJsx({
            factory: "h",
            include: ["*.js", "*.jsx", "*.svg"]
        }),
        // ... other plugins, etc ...
    ]
};

Specifying a library

// rollup.config.js
import rollupMxnSvg from "rollup-plugin-mxn-svg";
import rollupMxnJsx from "rollup-plugin-mxn-jsx";
// ... other imports, etc ...

export default {
    input: "src/main.js",
    // ...
    plugins: [
        rollupMxnSvg({
            imports: "import {createElement} from \"inferno-create-element\";",
            include: "*.svg"
        }),
        rollupMxnJsx({
            factory: "createElement",
            include: ["*.js", "*.jsx", "*.svg"]
        }),
        // ... other plugins, etc ...
    ]
};

Using SVGO

An option clean allows you to specify a custom function to remove any unnecessary elements in your SVG files.

SVGO can be used through clean to optimise your SVG files:

// rollup.config.js
import rollupMxnSvg from "rollup-plugin-mxn-svg";
import rollupMxnJsx from "rollup-plugin-mxn-jsx";
import SVGO from "svgo";
// ... other imports, etc ...

export default {
    input: "src/main.js",
    // ...
    plugins: [
        rollupMxnSvg({
            imports: "import {h} from \"preact\";",
            include: "*.svg",
            clean: rawSVG => (
                new SVGO({
                    plugins: [
                        {removeDoctype: true},
                        {removeXMLNS: true},
                        {removeComments: true},
                        {removeViewBox: false},
                    ]
                }).optimize(rawSVG).then(optzSvg => optzSvg.data)
            )
        }),
        rollupMxnJsx({
            factory: "h",
            include: ["*.js", "*.jsx", "*.svg"]
        }),
        // ... other plugins, etc ...
    ]
};

Internals

SVG files are imported as functional components which accept props. An example logo.svg file:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<!-- Generated by hand -->
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" version="1.1" viewBox="-50 -50 100 100">
  <circle cx="0" cy="0" fill="red" r="25"/>
</svg>

imported in a javascript file:

import Logo from 'path/to/logo.svg';

makes this available in your code:

const Logo = props => (
  <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" version="1.1" viewBox="-50 -50 100 100" {...props}>
    <circle cx="0" cy="0" fill="red" r="25"/>
  </svg>
)

License

This module is released under the MIT license.

Related