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

    0.5.5 • Public • Published

    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 };

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

    Install

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

    DownloadsWeekly Downloads

    98

    Version

    0.5.5

    License

    MIT

    Unpacked Size

    107 kB

    Total Files

    18

    Last publish

    Collaborators

    • ianwang