What is babel-plugin-react-svg?
The babel-plugin-react-svg package is a Babel plugin that allows you to import SVG files as React components. This can be particularly useful for incorporating SVGs directly into your React components without having to manually convert them.
What are babel-plugin-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 file is transformed into a React component, which can then be used like any other React component.
import MyIcon from './icon.svg';
const App = () => (
<div>
<MyIcon />
</div>
);
Customizing SVG with Props
You can pass props to the imported SVG component to customize its attributes such as width, height, and fill color. This makes it easy to reuse the same SVG with different styles.
import MyIcon from './icon.svg';
const App = () => (
<div>
<MyIcon width="50" height="50" fill="red" />
</div>
);
Other packages similar to babel-plugin-react-svg
react-svg
The react-svg package allows you to import SVG files and use them as React components. It provides a similar functionality to babel-plugin-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 flexibility and additional features such as optimizing SVGs and customizing the output.
react-inlinesvg
The react-inlinesvg package allows you to load SVGs inline in your React components. It fetches the SVG file and injects it directly into the DOM. This package is useful if you need to dynamically load SVGs at runtime.
babel-plugin-react-svg
A plugin that converts svg to a react component. Used in react-svg-loader
Install
npm i babel-plugin-react-svg --save-dev
yarn add babel-plugin-react-svg --dev
Example
Input SVG:
<svg class="foo" style='text-align: center; width: 100px' pointer-events="stroke">
<circle cx="50" cy="50" r="25" style="text-align: center;" stroke-width="5" />
</svg>
Output React Component:
import React from "react";
export default ({ styles = {}, ...props}) => <svg
className={styles["foo"] || "foo"}
style={{ textAlign: "center", width: "100px" }}
pointerEvents="stroke"
{...props}>
<circle cx="50" cy="50" r="25" style={{textAlign: "center"}} strokeWidth="5" />
</svg>;
Transformations
Going from bottom up, the following transformations are applied and the same can be checked in the partly annotated source - babel-plugin
1. Hyphenated attributes to camelCase
<svg pointer-events="none">
<path stroke-width="5"/>
</svg>
is transformed to
<svg pointerEvents="none">
<path strokeWidth="5"/>
</svg>
2. Style attr string to object
React expects style attribute value to be an object. Also, Hyphenated style names are converted to camel case.
<svg style="text-align: center">
<circle style="width: 10px"/>
</svg>
is transformed to
<svg style={{textAlign: 'center'}}>
<circle style={{width: '10px'}}/>
</svg>
3. Propagate props to root element
The props passed to the output component is passed on to the root SVG node and the props already defined are overridden by the props passed.
<svg width="50">
...
</svg>
is transformed to
<svg width="50" {...props}>
...
</svg>
4. class to className & class values to styles prop
<svg class="foo bar"/>
is transformed to
<svg className={ (styles["foo"] || "foo") + " " + (styles["bar"] || "bar") }>
5. export React.Component
The loader should now export the svg component. And this is done by wrapping it in an ArrowFunctionExpression.
<svg>...</svg>
is transformed to
import React from 'react';
export default ({ styles = {}, ...props }) => <svg {...props}>...</svg>;
Assumptions and Other gotchas
- Root element is always
<svg>
- SVG is optimized using SVGO
LICENSE
MIT