Icon
Display icons using well-defined styles.
Usage
First of all, you need to import the Icon component from the kitchn package.
import { Icon } from "kitchn"Props
| Name | Type | Default | Required | Description | Accepted values |
|---|---|---|---|---|---|
icon | SVGElement | undefined | ✅ | The icon as a svg element. | - |
size | number | string | Size | undefined | - | The size of the icon. | Size |
color | string | TextColors | undefined | - | The text color of the icon. Strictly limited to colors of our design system. If you want to pass accent color make sure to pass accent instead of color. | TextColors |
accent | string | AccentColors | undefined | - | The accent color of the ico. Strictly limited to colors of our design system, but can be used in combination with color prop. | AccentColors |
align | string | undefined | - | The alignement of the icon. | 'top' | 'middle' | 'bottom' |
Examples
For the following examples, we will use the AiFillHome icon from the React Icons library. But you can use any icon or library as long as it is a svg element.
💡
Referenced working icons libraries here
Basic
Color
Color light from TextColors:
Accent color
Color primary from AccentColors:
Custom color
Color as hex value (you can do anything color value type you want):
Size
Sizes are defined in the Size enum.
Custom size
Number and string values in pixels are accepted as well.
Align
Icons libraries
All icons libraries are compatible with the Icon component. Here are some of the most popular ones: