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 paths will be tested against to selectively ignore imports.
importPattern - A pattern that imports query will be tested against to selectively not 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:

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

Via CLI

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

Via Node API

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

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

jonlovera/babel-plugin-inline-react-svg