babel-plugin-inline-react-svg

What is babel-plugin-inline-react-svg?

The babel-plugin-inline-react-svg package is a Babel plugin that allows you to import SVG files directly as React components. This can be particularly useful for including SVGs in your React applications without having to manually convert them to JSX.

What are babel-plugin-inline-react-svg's main functionalities?

Importing SVG as React Component

This feature allows you to import an SVG file and use it as a React component. The SVG content is inlined into the component, which can then be used like any other React component.

import Logo from './logo.svg';

const App = () => (
  <div>
    <Logo />
  </div>
);

Customizing SVG Attributes

You can customize the attributes of the imported SVG component, such as width, height, and fill color, directly in your JSX.

import Logo from './logo.svg';

const App = () => (
  <div>
    <Logo width="100" height="100" fill="red" />
  </div>
);

Inlining SVGs for Performance

Inlining SVGs can improve performance by reducing the number of HTTP requests and allowing for better control over the SVG content.

import Icon from './icon.svg';

const App = () => (
  <div>
    <Icon />
  </div>
);

Other packages similar to babel-plugin-inline-react-svg

react-svg

The react-svg package allows you to import SVG files and use them as React components. It provides similar functionality to babel-plugin-inline-react-svg but does not require a Babel plugin. Instead, it uses a React component to load and render the SVG.

svgr

SVGR is a tool that transforms SVGs into React components. It can be used as a CLI tool, a webpack loader, or a Node.js library. SVGR offers more customization options and can be integrated into various build processes, making it a more flexible option compared to babel-plugin-inline-react-svg.

react-inlinesvg

The react-inlinesvg package allows you to load and inline SVGs in your React components. It provides a React component that fetches the SVG file and inlines its content. This package is useful if you prefer to keep your SVGs as separate files and load them dynamically.

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:

{
  "plugins": [
    [
      "inline-react-svg",
      {
        "svgo": {
          "plugins": [
            {
              "name": "removeAttrs", 
              "params": { "attrs": "(data-name)" }
            },
            "cleanupIDs"
          ]
        }
      }
    ]
  ]
}

Note: If plugins field is specified the default enabled svgo plugins will be overrided. Alternatively, if your Babel config is in JavaScript, the default list of plugins can be extended by making use of the extendDefaultPlugins utility provided by svgo.

const { extendDefaultPlugins } = require('svgo');

module.exports = {
  plugins: [
    [
      'inline-react-svg',
      {
        svgo: {
          plugins: extendDefaultPlugins([
            {
              name: 'removeAttrs',
              params: { attrs: '(data-name)' }
            },
            'cleanupIDs',
          ])
        }
      }
    ]
  ]
}

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.

Changelog

v2.0.2 - 2023-02-22

Merged

• [actions] make a "summary" job, to require for protected branches #120
• Tweak some formatting in readme #119
• migrate from travis to github actions #117

Fixed

• [Fix] Register export declaration in scope #74

Commits

• [meta] add auto-changelog 0137651
• [Tests] migrate from travis to github actions 63611b5
• [Dev Deps] update @babel/cli, @babel/node, @babel/preset-react, eslint, eslint-config-airbnb, eslint-plugin-import, eslint-plugin-jsx-a11y, eslint-plugin-react b839b94
• [readme] Update svgo configuration example e37c29b
• [Fix] Fix crash when svg has a style tag in the root element; pass path to SVGO a4c1c4c
• [meta] use npmignore to autogenerate an npmignore file aeb3ddf
• [Deps] update resolve, svgo b29d6a6
• [meta] add safe-publish-latest and use prepublishOnly 982144b
• [Dev Deps] update @babel/cli, @babel/plugin-transform-typescript 815bb4a