React Custom Icon uses SVG for the icon content
npm install @dudiharush/react-custom-icon
import * as React from "react";
import { IconMap, getCustomIcon } from "@dudiharush/react-custom-icon";
// step 1: define an icon map object
const iconMap: IconMap = {
IconName1: {
content: (
fillRule="evenodd"
d="M16 7H2V3h4.046l1.059 2H16v2zM2 15h14V9H2v6zM8 3L7 1H1.065C.474 1 0 1.475 0 2.024V16c0 .615.41 1 1.065 1H17c.496 0 1-.512 1-1V4c0-.533-.452-1-1-1H8z"
/>
),
viewBoxSize: 18
},
IconName2: {
content: (
fillRule="evenodd"
d="M16 7H2V3h4.046l1.059 2H16v2zM2 15h14V9H2v6zM8 3L7 1H1.065C.474 1 0 1.475 0 2.024V16c0 .615.41 1 1.065 1H17c.496 0 1-.512 1-1V4c0-.533-.452-1-1-1H8z"
/>
),
viewBoxSize: 18
},
IconName3: {
content: (
),
viewBoxSize: 18
}
};
export function App() {
// step 2: get component by passing the icon map from step 1
const CustomIcon = getCustomIcon(iconMap);
return (
);
}
``