The Icon component in Chakra UI can work with SVGs (Scalable Vector Graphics), font icons, and even CSS-in-JS icons. SVGs are recommended due to their scalability and customization options. Chakra UI uses the Box component as a base for the Icon component, which means you can apply all the style props you would to a Box component.
Here are the common props used with the Icon component:
as: Specifies the icon to be used. You can use Chakra's in-built icons, imported icons from other libraries, or custom SVG icons.
boxSize: The size of the icon. This determines both the height and width of the icon.
color: The color of the icon.
Beyond using pre-existing icons, you can also create custom icons by leveraging SVGs. Chakra UI provides helper functions and components to create consistent, theme-able, and accessible custom icons.
Icons are crucial in UI design as they guide users, save space, and improve aesthetics. Chakra UI's Icon component, with its simplicity and flexibility, makes it easy for developers to integrate and manage icons in their applications.
Icon libraries and components can be installed as follows, and individual icons can be imported as shown in the accompanying code.
Chakra reminds you to avoid passing onClick handlers to icon components and rather to use the IconButton component when you need a clickable icon.
Chakra's Built-In Icons
Using External Icons
Utilizing third-party icon libraries, such as react-icons, within Chakra UI can be accomplished in a few straightforward steps. Initially, you need to import the Icon component from @chakra-ui/react. Subsequently, you can specify the icon from your preferred external library by assigning it to the as prop of the imported Icon component.
Creating Custom Icons
⦾ Using the Icon Component: The Icon component is an SVG element that allows you to create your own SVG paths. Here's an example where I have created a function that produces a custom icon, which implement in the same way as Chakra icons or react-icons.
Using the createIcon Function
⦾ The createIcon function is a convenient way to generate icons. It wraps around the Icon component and offers similar functionality with less effort.
The createIcon function provides a streamlined way to create icons in your Chakra UI powered applications, and can often lead to cleaner, more maintainable code. Here are a few reasons why it may be preferred:
Did you know?
Creative Idea No. 1
Creative Idea No. 2
Creative Idea No. 3