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 # or with yarn yarn add babel-plugin-react-svg --dev
Example
Input SVG:
Output React Component:
; <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
is transformed to
2. Style attr string to object
React expects style attribute value to be an object. Also, Hyphenated style names are converted to camel case.
is transformed to
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.
...
is transformed to
...
4. class to className & class values to styles prop
is transformed to
<svg =>
5. export React.Component
The loader should now export the svg component. And this is done by wrapping it in an ArrowFunctionExpression.
...
is transformed to
; <svg ...props>...</svg>;
Assumptions and Other gotchas
- Root element is always
<svg>
- SVG is optimized using SVGO