Introduction
The Icon component in our library is designed to be easy to use and customizable, allowing you to include icons in your application with minimal effort. In this tutorial, we will learn how to use the Icon component and explore its customization options.
Basic Usage
To use the Icon component, simply import it and provide the `name` prop, which should correspond to the name of the icon you want to display:
Basic Implementation:
This will render the dark mode icon from the Rokkit icon set. Make sure to include the appropriate icon set in your project.
Custom Sizes
You can easily customize the size of the icon using the `size` prop. The available sizes are `small`, `medium`, `large`, and `base` (default):
Size Options:
Interactive Icons
By default, the role is set to `img`, but you can change it to `button` to use it as a button. You can also add click event handlers to make icons interactive.
Button Role
With Event Handler
The `click` event will be triggered not only when the button is clicked, but also when it is focused and the user presses the `Enter` key.
Properties
Core Properties
- name: Icon name (required)
- size: Icon size ('small', 'medium', 'large', 'base')
- role: ARIA role ('img', 'button')
- label: Accessibility label
Styling
- class: Custom CSS classes
Accessibility
You can set the `aria-label` for the icon using the label property to improve accessibility for screen readers.
Continue learning
Icons are often used with other primitive components like Items and Pills.
Item Component → Pill Component →