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:

Highlight Image