@ianwang/babel-plugin-inline-react-svg

A babel plugin that optimizes and inlines SVGs for your react components.

Stats

StarsIssuesVersionUpdatedCreatedSize
@ianwang/babel-plugin-inline-react-svg
425320.5.53 years ago3 years agoMinified + gzip package size for @ianwang/babel-plugin-inline-react-svg in KB

Readme

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.

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.