Why it matters
Icons in React apps are usually SVG components, but pasting raw SVG into JSX breaks: class must become className, stroke-width becomes strokeWidth, and style strings must become objects. Fixing that by hand for every icon is tedious.
For plain HTML and CSS, an SVG data URI avoids an extra request for small icons. URL-encoding it, rather than Base64, keeps it about a third smaller and still readable.
How it works
- InputSVG code
- In your browserParsed, cleaned and rewritten for React
- OutputA JSX or TSX component, a data URI and CSS
Where it fits in a designer's workflow
- Plan
- Design
- Build
- Test
- Launch
By the numbers
Show the numbers as a table
| Form | Bytes |
|---|---|
| SVG text | 300 |
| Data URI, URL-encoded | 335 |
| Data URI, Base64 | 426 |
How to use it
- Paste your SVG, or keep the example.
- Name the component and choose JSX or TSX.
- Tick the options you want, such as currentColor.
- Copy or download the component, the data URI or the CSS.
FAQ
Should I optimise the SVG first?
Yes, for exported icons. Run it through the SVG Optimiser to remove editor data, then convert it here.
Why URL-encode instead of Base64?
SVG is text, so URL-encoding only escapes a few characters and the result stays about 30% smaller than Base64. Base64 is there for tools that need it.
Are scripts kept?
No. Script tags and on… event attributes are removed from all the outputs.
Does it work with React Native?
The JSX uses web SVG elements. For React Native you'd use react-native-svg, which needs capitalised element names.
