rollup-plugin-mxn-svg

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

• rollup-plugin-mxn-jsx - Rollup JSX plugin that transpiles JSX into JavaScript
• mxn-jsx-ast-transformer - Transforms JSX AST into regular JS AST
• mxn-jsx-transpiler - Transpiles JSX to regular JavaScript