Created
February 25, 2023 18:26
-
-
Save aleyrizvi/0107975e2a5dbbf11c2ed34db1169eb9 to your computer and use it in GitHub Desktop.
Dynamic TablerIcons without loading all icons
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import {IconAward, IconBrandAmazon, IconBrandAdobe} from "@tabler/icons-react" | |
export const TablerIcons = (props) => { | |
const { icon, color = "gray", size = 6, stroke = 2 } = props | |
const icons = { | |
"IconAward" : IconAward, | |
"IconBrandAmazon": IconBrandAmazon, | |
"IconBrandAdobe": IconBrandAdobe | |
} | |
const Icon = icons[icon] | |
if (Icon) { | |
return <Icon width={size} color={color} stroke={stroke} /> | |
} | |
return <p>Not found</p> | |
} | |
// Usage | |
<TablerIcons icon={"IconAward"} color={"red"} size={100} stroke={2} /> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment