Skip to content
A babel plugin that optimizes and inlines SVGs for your React Components.
Branch: master
Clone or download
ljharb v1.1.0
 - [New] Add support for export default from (#55)
 - [meta] add MIT license file (#60)
 - [Deps] update `resolve`
 - [Dev Deps] update `@babel/cli`, `@babel/node`, `babel-preset-airbnb`, `eslint`, `eslint-plugin-import`, `eslint-plugin-jsx-a11y`, `eslint-plugin-react`
Latest commit 759937b Apr 10, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
src
test
.babelrc First version Sep 19, 2016
.eslintrc First version Sep 19, 2016
.gitignore Only apps should have lockfiles May 18, 2018
.npmignore
.npmrc Only apps should have lockfiles May 18, 2018
.travis.yml
LICENSE add MIT license file Apr 9, 2019
README.md
package.json v1.1.0 Apr 10, 2019

README.md

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:
{
  "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.

You can’t perform that action at this time.