Create an icon component from a SVG icon
Tags: tooling, automation, javascript
Published: 2023-06-30 16:17:12

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)
![Default view](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0lmpbtqh91790828vw35.png)

4. Wait to generate the default component (React in JSX)
![SVG converter working](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v5zcpo5kmny2vgdbg2d9.png)

5. And choose to desired framework, Svelte + Typescript for example
![Choose your option](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oiawryeefd8nj50quj4r.png)

6. You have a good base Svelte component in Typescript
```html
<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
![Drag and drop SVG files](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k2igjxjhujdz5koswiow.png)

2. Choose your framework
![Choose your framework](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1qz7pb4lhpwqd2b7jtpr.png)

3. Choose the Language (Javascript or Typescript)
![Choose the language](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5oh0uv09u10yljd4acfo.png)

4. Download the icons in a zip file
![Download icons](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b5o3nj3fzt064h9fg2b0.png)

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