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"The Icon component has multiple ways to display icons. You can use a SVG Element icon or a link pointing to a SVG file or any image.
For the following examples, we will use the AiFillHome icon from the React Icons library for uses with SVG Element. You can use any icon or library as long as it is a svg element.
Then we will use an image icon from the link /favicon.svg (https://kitchn.tonightpass.com/favicon.svg (opens in a new tab)).
Referenced working icons libraries here
Basic
Color
The Icon component is designed to work with SVG elements and some props like color might not work if a src prop is used. If you want to display an image, you can use the Image component. This feature is here for users that maybe have some custom SVG icons or images as icons.
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
Props
| Name | Type | Default | Required | Description | Accepted values |
|---|---|---|---|---|---|
icon | SVGElement | undefined | ~ | The icon as a svg element. | - |
src | string | undefined | ~ | The icon as a link pointing to a svg file or any image. | - |
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' |
Icons libraries
All icons libraries are compatible with the Icon component. Here are some of the most popular ones: