Every time when you have an icon in SVG, and you want to use it in a application, you need to adapt it to the correspond syntax of the framework. This is something repetitive and tired: remove unnecessary attributes, add inherit classes, inherit styles, add size properties, stroke if apply, ...
Then, inspired on this https://svg2jsx.com, a tool to create a React component from a SVG, I created https://svg-icon-2-fw-component.dimaslz.dev/, a tool to create any framework (angular, vue2, vue3, react, svelte, ...) component, with Javascript or Typescript variant, form a SVG.
How it works?
- Go to https://svg-icon-2-fw-component.dimaslz.dev
- Copy some SVG icon (go here for example https://heroicons.com, and copy the SVG version)
Paste the content on the left editor (paste SVG string content or drop multiple SVG files here)
And choose to desired framework, Svelte + Typescript for example
You have a good base Svelte component in Typescript
<script lang="ts">
export let size: string | number = 24;
export let stroke: string | number = 1;
</script>
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
stroke="currentColor"
stroke-width={stroke}
viewBox="0 0 24 24"
style={`width: ${size}px; height: ${size}px; stroke-width=${stroke};`}
><path
stroke-linecap="round"
stroke-linejoin="round"
d="M4.26 10.147a60.436 60.436 0 0 0-.491 6.347A48.627 48.627 0 0 1 12 20.904a48.627 48.627 0 0 1 8.232-4.41 60.46 60.46 0 0 0-.491-6.347m-15.482 0a50.57 50.57 0 0 0-2.658-.813A59.905 59.905 0 0 1 12 3.493a59.902 59.902 0 0 1 10.399 5.84 51.39 51.39 0 0 0-2.658.814m-15.482 0A50.697 50.697 0 0 1 12 13.489a50.702 50.702 0 0 1 7.74-3.342M6.75 15a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5zm0 0v-3.675A55.378 55.378 0 0 1 12 8.443m-7.007 11.55A5.981 5.981 0 0 0 6.75 15.75v-1.5"
/></svg
>
How to use it with multiple svg files?
The format of the filename is icon-builder-{datetime}-framework.zip
. Inside this file, you will have all the files to use in your application.
End
Do you like it?, I appreciate feedback. Feel free to add issues to the repo here https://github.com/dimaslz/icon-lib-builder and give me a ⭐️ to motivate me to continue working on it.
Thank you for reading and, happy coding! 👨💻
Top comments (0)
Some comments may only be visible to logged-in visitors. Sign in to view all comments.