Create a reusable icon component in react

Icons are an essential part of UI. They help to communicate idea quickly and can add a professional touch to your website .While there are many icon libraries out there, sometime your may need to create your own custom icon, in this tutorial, we'll show you how to create a reusable icon component in react ,

Before start make sure you have basic know of React and SVG

Lets get started

first thing we need to create a react component as below

import './Icon.css';

export const Icon = ()=> {
  return (
    <svg>
      <path d="" />
    </svg>
  );
};

In this code, we've defined a new functional component called Icon. We've also created an SVG element with an empty path element inside it. This path element will be replaced with the actual SVG path data for our icon.

Adding Props

Now that we have our basic Icon component, we can add some props to make it more flexible. We'll add the following props:

• name: This will be the name of the icon that we want to use.
• size: This will be the size of the icon in pixels.
• color: This will be the fill color of the icon.

import './Icon.css';

export const Icon = ({
  name,
  size = 24,
  color = 'currentColor',
  ...rest
}) => {


  return (
    <svg
      width={size}
      height={size}
      viewBox={`0 0 ${size + 10} ${size + 10}`}
      fill={color}
      xmlns="http://www.w3.org/2000/svg"
      {...rest}
    >
      <path d="" />
    </svg>
  );
};

Here, we've added the name, size, and color props to our component. We've also set default values for size and color. In the svg element, we've added the width, height, viewBox, and fill attributes. We've also added the xmlns attribute, which is required for all SVG elements.

Adding Icons

Next, we'll add some actual icons to our component. We can define our icons as objects, where the key is the name of the icon and the value is the SVG path data.

import './Icon.css';

export const Icon = ({
  name,
  size = 24,
  color = 'currentColor',
  ...rest
}) => {
  const icons = {
    star: 'M33.5784 12.2983C33.3634 11.6683 32.795 11.2233 32.1317 11.1716L22.63 10.4166L18.5184 1.31498C18.25 0.716646 17.655 0.333313 17 0.333313C16.345 0.333313 15.75 0.716646 15.4817 1.31331L11.37 10.4166L1.86838 11.1716C1.21671 11.2233 0.655046 11.6516 0.433379 12.2666C0.211713 12.8816 0.36838 13.57 0.836713 14.0266L7.85838 20.8716L5.37505 31.625C5.22171 32.29 5.49005 32.9816 6.05171 33.37C6.33838 33.5667 6.66838 33.6666 7.00005 33.6666C7.32171 33.6666 7.64505 33.5733 7.92505 33.3867L17 27.3366L26.075 33.3867C26.655 33.7733 27.4167 33.7583 27.9834 33.3466C28.5467 32.935 28.795 32.2133 28.6034 31.5433L25.555 20.8766L33.115 14.0733C33.6101 13.6266 33.7917 12.93 33.5784 12.2983Z" fill="#3E413F"',
  };

  return (
    <svg
      width={size}
      height={size}
      viewBox={`0 0 ${size + 10} ${size + 10}`}
      fill={color}
      xmlns="http://www.w3.org/2000/svg"
      {...rest}
    >
      <path d={icons[name]} />
    </svg>
  );
};

in case your confuse with viewBox={0 0 ${size + 10} ${size + 10}} , here im just adjusting the viewBox with different height and width