Create an icon component from a SVG icon

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?

1. Go to https://svg-icon-2-fw-component.dimaslz.dev
2. Copy some SVG icon (go here for example https://heroicons.com, and copy the SVG version)

3. Paste the content on the left editor (paste SVG string content or drop multiple SVG files here)
   

4. Wait to generate the default component (React in JSX)
   

5. And choose to desired framework, Svelte + Typescript for example
   

6. 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?

1. Drag and drop your SVG files
   

2. Choose your framework
   

3. Choose the Language (Javascript or Typescript)
   

4. Download the icons in a zip file
   

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! 👨‍💻