Babel plugin to optimize and inline SVG
npm install babel-plugin-inline-svg[![NPM version][npm-image]][npm-url]
[![Downloads][downloads-image]][npm-url]
[![Dependency status][david-dm-image]][david-dm-url]
> Import raw SVG files into your code, optimising with SVGO, and removing ID namespace conflicts.
- What it do
- 1. Turns import statements into inline SVG strings
- 2. Optimises the SVG through SVGO
- 3. Namespaces id’s to prevent conflicts
- 4. Exporting as dataURI format
- Installation
- Usage
- Via .babelrc (Recommended)
- Options
- Via CLI
- Via Node API
So this:
``js`
import someSvg from "some-svg.svg";
Becomes this:
`js`
var someSvg =
'';
So you can do something like this maybe:
`js
import React from "react";
import someSvg from "some-svg.svg";
const NaughtyUsage = () => (
dangerouslySetInnerHTML={{
__html: someSvg,
}}
/>
);
`
Does what it says on the tin. You can pass options to the SVGO processor with an svgo object in options.
You can also disable this option if you really want, with disableSVGO: true.
If you inline a lot of SVGs you might get namespace conflicts, which could be really annoying if you're styling your SVG in CSS and whatnot. This plugin solves that with some some regex trickery. The namespace of the ID comes from the name of import/require variable.
So given this simple cheese.svg file:
`svg`
Which you then import like so:
`js`
import wheelOfCheese from "cheese.svg";
You get the following output:
`js`
var wheelOfCheese =
'';
To disable this feature, pass disableNamespaceIds: true in the options.
If you need to use the output directly in an image source ( or in a css background-image, for example), you can pass exportDataURI: true
in the options.data:image/svg+xml;base64,
The output will be encoded as base64 and prefixed with , so you can do something like:
`javascript
import logo from "./logo.svg";
const Logo = () => ;
`
``
npm install --save-dev babel-plugin-inline-svg
.babelrc
`json`
{
"plugins": ["inline-svg"]
}
- _ignorePattern_ - A string regex that imports will be tested against so you can ignore themdisableSVGO
- __ - set to false to disable running the svg through SVGOdisableNamespaceIds
- __ - set to false to leave all id's as they aresvgo
- __ - an object of SVGO optionsexportDataURI
- __ - set to true to export a base64-encoded SVG, prefixed with data:image/svg+xml;base64,
Example .babelrc:
`js
{
"plugins": [
[
"inline-svg",
{
"ignorePattern": "icons",
"disableNamespaceIds": true,
"svgo": {
"plugins": [
{
"removeDimensions": true,
}
]
}
}
]
]
}
`
Note: To function correctly, this babel plugin disables the cleanupIDs SVGO plugin by default (to facilitate the ID namespacing). When passing your own SVGO options you might want to remove the cleanupIDs plugin so namespacing still works.
Also note: the ID namespaceing _can_ be done with a similar SVGO plugin, prefixIds — however this prefix is a static string so you might still end up with namespace conflicts.
`sh`
$ babel --plugins inline-svg script.js
`javascript``
require("babel-core").transform("code", {
plugins: ["inline-svg"],
}); // => { code, map, ast };
[npm-url]: https://npmjs.org/package/babel-plugin-inline-svg
[downloads-image]: http://img.shields.io/npm/dm/babel-plugin-inline-svg.svg
[npm-image]: http://img.shields.io/npm/v/babel-plugin-inline-svg.svg
[david-dm-url]: https://david-dm.org/iest/babel-plugin-inline-svg
[david-dm-image]: https://david-dm.org/iest/babel-plugin-inline-svg.svg