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

What it do

$3

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,
}}
/>
);
`

$3

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.

$3

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.

$3

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.
The output will be encoded as base64 and prefixed with data:image/svg+xml;base64,, so you can do something like:

`javascript
import logo from "./logo.svg";

const Logo = () => ;
`

Installation

`
npm install --save-dev babel-plugin-inline-svg
`

Usage

$3

.babelrc

`json
{
"plugins": ["inline-svg"]
}
`

$3

- _ignorePattern_ - A string regex that imports will be tested against so you can ignore them
- _disableSVGO_ - set to false to disable running the svg through SVGO
- _disableNamespaceIds_ - set to false to leave all id's as they are
- _svgo_ - an object of SVGO options
- _exportDataURI_ - 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.

$3

`sh
$ babel --plugins inline-svg script.js
`

$3

`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