One Click SVG

About this plugin

Still manually editing the code for your SVG icon in your HTML editor, changing its colors and making it responsive after copying it from Figma a hundred times a day? With this plugin, you can forget about those repetitive boring actions, because it does them for you! Just select -> copy -> paste!

Works perfectly with Webflow, your favorite HTML editor, and any other website development service that allows embedding HTML code.

What does the plugin do?

With the default settings, the plugin changes the width of the icon by 100%, making it truly responsive and adapting to the size of its parent div. It also uniqueizes the ID of each gradient and mask, if your icon has one, so that the styles of one of them are not inherited by every subsequent icon.

How it works?

1.  Launch the One Click SVG plugin.
2. Select the icon or any other vector graphic in your design.
3. Click the "Mono" button to copy the monochrome version of your icon. In this case, the plugin will replace all colors to fill="currentColor".
4. Click the "Poly" button to copy the colored version of your icon without any changes in colors.
5. Open your HTML editor and paste the prepared SVG code.

Additional settings

✅ Switch OFF the width="100%" to keep the original size of your icon in pixels, exactly like it was in the design.

✅ Use height="100%", max-width="100%" and max-height="100%" if you need it.

✅ Switch ON "Remove Opacity" to remove "opacity" and "fill-opacity" from the code of your icon, so you can control it from your CSS rules with more flexibility.

Say thanks and support us with donations 🙏

https://www.buymeacoffee.com/OneClickSVG

Credits

Idea: Maksim Lobanov, https://maks.expert

Coding: Andrei Pushchayenka, [email protected]