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; console;
Create a rollup.config.js
configuration file and import the plugin:
// rollup.config.js;;// ... other imports, etc ... input: "src/index.js" // ... output: file: "bundle/bundle.js" format: "iife" plugins: // ... 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; // OR import React from "react";; <div class="App"> <div class="App-header"> <Logo class="App-logo" /> </div> </div>;
// rollup.config.js;;// ... other imports, etc ... input: "src/main.js" // ... plugins: // ... other plugins, etc ... ;
Specifying a library
// rollup.config.js;;// ... other imports, etc ... input: "src/main.js" // ... plugins: // ... 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;;;// ... other imports, etc ... input: "src/main.js" // ... plugins: // ... other plugins, etc ... ;
Internals
SVG files are imported as functional components which accept props
.
An example logo.svg
file:
<!-- Generated by hand -->
imported in a javascript file:
import Logo from 'path/to/logo.svg';
makes this available in your code:
const Logo = <svg ="http://www.w3.org/2000/svg" ="100%" ="100%" ="1.1" ="-50 -50 100 100" > <circle ="0" ="0" ="red" ="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