Toolipedia- Free
- No sign-up
- Works on any device
No tool matches your search.
- Free
- No sign-up
- Works on any device
Create a QR code for a link, Wi-Fi, WhatsApp, contact and more, or read one from a photo.
- Free
- No sign-up
- Works on any device
Fill in the details to see your QR code.
PNG for phones, chats and websites. SVG and PDF stay sharp at any size, which is best for printing. Tip: point your phone camera at the preview to test it.
3. Style (optional): colors, dots, logo
Choose a photo or screenshot or drag it here
Works with photos of printed codes, screenshots and image files.
Looking for QR codes…
SVG to React component
Turn an SVG into a React component with props, ready to paste.
- Free
- No sign-up
- Works on any device
About SVG to React component
Paste an SVG and get a React component that accepts props such as width, height and color. Attributes become camelCase (stroke-width turns into strokeWidth) and class becomes className. Replace fixed colours with currentColor so the icon follows the surrounding text colour.
How to use SVG to React component
- Paste your SVG markup.
- Choose options such as TypeScript and component name.
- Copy the component into your React project.
Why use this tool?
- Private: everything happens in your browser. Nothing you enter is uploaded.
- Free, with no sign-up, no watermark and no limit on how often you use it.
- Works on phones, tablets and computers: Android, iPhone, Windows, Mac and Linux. Nothing to install.
- Free to embed on your own website, with a ready-made code to copy.
- Available in 10 languages.
Also known as
Frequently asked questions
How do I change an SVG icon colour in React?
Set fill or stroke to currentColor in the SVG, then change the CSS color on the parent or pass a color prop.
Which SVG attributes change in React?
Names with dashes become camelCase, such as stroke-width to strokeWidth, and class becomes className. The tool applies these for you.
How can I make the icon size adjustable?
The component accepts props, so pass width and height, or let it use 1em to inherit the surrounding text size.
Is SVG to React component free?
Yes. SVG to React component on Toolipedia is free to use, with no sign-up and no watermark.
Is it safe to use?
Yes. Everything is worked out in your browser, and nothing you enter is sent to our server.
Does it work on my phone?
Yes. It works in any modern browser on Android and iPhone, as well as on tablets and computers. There's nothing to install.
Do I need an account?
No. Just open the page and use the tool. There's no sign-up and no email needed.
Can I put SVG to React component on my own website?
Yes. Use the Embed on your site button under the tool to copy a short piece of code and paste it into your page. It is free, needs no account, and the tool keeps working inside your page.