Designing the user interface of an application, icons are the most important elements to be used. Using SVG for the icons gives the flexibility to fill custom colors and make our application more unique. In this article, we can see how to use SVG icons in a better way using Svelte JS.

The idea behind

In the SVG file, the path tag has an attribute called ‘d’, which is used to draw the path and shape of the icon. checkout the sample SVG file which creates a heart shape path icon.

<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <path fill="none" stroke="red"
    d="M 10,30
       A 20,20 0,0,1 50,30
       A 20,20 0,0,1 90,30
       Q 90,60 50,90
       Q 10,60 10,30 z" />
</svg>

heart.svg

Most opensource icon packs support SVG now.

In this article, I have used heroicons. We can use any icon packs or use their own SVG drawing illustrations based on guidelines.

Our app does not require all the icons that’s why better to use only specific icons required.

💡 So _**_d**_ is our key to create a customizable icon component._

Let see how to implement it in the Svelte JS application step by step.

Step 1: Create a Svelte component with custom attributes d and fill

SvgIcon.svelte component has a customizable fill attribute to be able to fill any color. Based on our use case we can customize other the attributes as we want.

#ui #programming #javascript #svelte #svg