babel-plugin-inline-react-svg
A babel plugin that optimizes and inlines SVGs for your react components.
Last updated 7 months ago by ljharb .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install babel-plugin-inline-react-svg 
SYNC missed versions from official npm registry.

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.

Current Tags

  • 1.1.0                                ...           latest (7 months ago)

14 Versions

  • 1.1.0                                ...           7 months ago
  • 1.0.1                                ...           a year ago
  • 1.0.0                                ...           a year ago
  • 0.5.4                                ...           a year ago
  • 0.5.3                                ...           a year ago
  • 0.5.2                                ...           2 years ago
  • 0.5.1                                ...           2 years ago
  • 0.4.0                                ...           3 years ago
  • 0.3.1                                ...           3 years ago
  • 0.3.0                                ...           3 years ago
  • 0.2.0                                ...           3 years ago
  • 0.1.2                                ...           3 years ago
  • 0.1.1                                ...           3 years ago
  • 0.1.0                                ...           3 years ago
Downloads
Today 0
This Week 72
This Month 247
Last Day 30
Last Week 74
Last Month 294
Dependencies (5)
Dev Dependencies (11)

Copyright 2014 - 2016 © taobao.org |