DEV Community

Cover image for Create an icon component from a SVG icon
Dimas López
Dimas López

Posted on

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)
    Default view

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

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

  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
>
Enter fullscreen mode Exit fullscreen mode

How to use it with multiple svg files?

  1. Drag and drop your SVG files
    Drag and drop SVG files

  2. Choose your framework
    Choose your framework

  3. Choose the Language (Javascript or Typescript)
    Choose the language

  4. Download the icons in a zip file
    Download icons

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.