I have multiple Icon components like this:
import { IconProps } from "@utils/types";
const FilterIcon = (props: IconProps) => {
const { fillColor, width, height } = props;
return (
<svg
width={width}
height={height}
viewBox="0 0 24 24"
fill="white"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M17.625 12C1..."
fill={fillColor}
/>
</svg>
);
};
export default FilterIcon;
the problem is that I have almots 40 of them in different files. I want to make a component to use them in a better way, something like this:
<Icon name="IconName" width="20px" height="20px" fillColor="white" />
where name could be an enum type or similar
I made a huge Icon component that imports all the icons and uses a switch to return an icon component (130 lines…)
2
Answers
First, you can declare a barrel file:
And then create an
<Icon>
component:Instead of using a switch statement, you can utilize a mapping object to map icon names to their respective components.
and then you can use like below:-