Rollup-plugin-mxn-svg NPM

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