From an SVG file to a React component
Icons and illustrations arrive from design tools as SVG files full of things a React project doesn't want: an XML declaration, editor comments, ids and groups from the layers panel, fixed widths and heights, hard-coded colours, and attributes in a form JSX can't take, like class and stroke-width. This tool takes care of all of it in one step.
Paste the SVG or drop the file. SVGO strips the editor's leftovers and tidies the paths; the converter rewrites every attribute into its JSX name (strokeWidth, className, fillRule), turns style strings into style objects, escapes text, spreads props onto the root so className, size and aria labels pass through, and names the component after the file.
currentColor and sizing
Use currentColor replaces the icon's solid colours with currentColor, so the icon takes the colour of the text it sits in: one icon works on a light button, a dark nav bar and in a hover state, with no extra code. The preview's test colour shows it live. For an icon with several colours on purpose, keep it off; the tool warns you when an SVG has more than one.
With Keep width and height off, the icon has no fixed size and fills the box your CSS gives it, keeping its proportions from the viewBox. If the SVG has no viewBox, one is made from its width and height so nothing is lost.
Accessible icons
An icon beside a text label, like an arrow in a button, should be hidden from screen readers, or they read it twice. Hide from screen readers adds aria-hidden. An icon that stands alone, like a close button with no text, needs a label instead: turn the option off and pass aria-label and role="img" as props.
React Native, data URIs and CSS
- React Native: a component for react-native-svg, with Path, G, Circle and the rest imported by name. Style blocks, titles and class names, which React Native can't use, are left out.
- SVG: the optimised, cleaned SVG, ready for an img tag or a sprite.
- Data URI: the SVG written into a URL, the short URL-encoded form (smaller than base64 for SVG) and base64 for tools that need it.
- CSS: the data URI as a background-image, for decorative icons in a stylesheet.
Safe by default
SVG can carry scripts. The converter drops script tags, event handler attributes like onload, and javascript: links before anything is shown or written, so the preview and the code are safe to use. Everything runs in your browser and nothing is uploaded. I build front ends like this in React and Next.js; for design tokens, see design tokens to Tailwind.