Wondering what’s next for npm?Check out our public roadmap! »

    babel-plugin-inline-react-svg

    2.0.1 • 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', { filename: 'filename representing the code' }],
      ]
    }) // => { code, map, ast };

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

    Install

    npm i babel-plugin-inline-react-svg

    DownloadsWeekly Downloads

    124,275

    Version

    2.0.1

    License

    MIT

    Unpacked Size

    33.7 kB

    Total Files

    31

    Last publish

    Collaborators

    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar