babel-plugin-inline-react-svg

Transforms imports to SVG files into React Components, and optimizes the SVGs with SVGO.

For example, the following code...

import React from 'react';
import CloseSVG from './close.svg';

const MyComponent = () => <CloseSvg />;

will be transformed into...

import React from 'react';
const CloseSVG = () => <svg>{/* ... */}</svg>;

const MyComponent = () => <CloseSvg />;

Installation

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

Usage

Via .babelrc (Recommended)

.babelrc

{
  "plugins": [
    "inline-react-svg"
  ]
}

Options

• ignorePattern - A pattern that imports will be tested against to selectively ignore imports.

• caseSensitive - A boolean value that if true will require file paths to match with case-sensitivity. Useful to ensure consistent behavior if working on both a case-sensitive operating system like Linux and a case-insensitive one like OS X or Windows.

• svgo - svgo options (false to disable). Example: ```json { "plugins": [ [

  "inline-react-svg",
  {
    "svgo": {
      "plugins": [
        {
          "removeAttrs": { "attrs": "(data-name)" }
        },
        {
          "cleanupIDs": true
        }
      ]
  
    }
  }
  

  ] ] }

### Via CLI

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

Via Node API

require('babel-core').transform('code', {
  plugins: ['inline-react-svg']
}) // => { code, map, ast };

---

Inspired by and code foundation provided by react-svg-loader.