svg

A babel plugin that optimizes and inlines SVGs for your React Components

Jun 27, 2018
A babel plugin that optimizes and inlines SVGs for your React Components

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'] }) // => { code, map, ast };

GitHub

Recommended