To implement Icon component into your project you need to know its name. You can find it in the list of all icons. Then just add an import of the icon:
import Airplane from "@kiwicom/orbit-components/lib/icons/Airplane";After adding import into your project you can use it simply like:
<Airplane />Props
Table below contains all types of the props available for icons in general.
| Name | Type | Default | Description |
|---|---|---|---|
| className | string |
The optional className of Icon. | |
| color | enum |
currentColor |
The color of the Icon. |
| customColor | string |
The customColor of the Icon. See Functional specs | |
| dataTest | string |
Optional prop for testing purposes. | |
| size | enum |
"medium" |
The size of the Icon. |
| reverseOnRtl | boolean |
false |
If true, the icon will be reversed if theme.rtl is set to true. |
| ariaHidden | boolean |
Adds prop aria-hidden to an element, useful for screenreaders. |
|
| ariaLabel | string |
Adds prop aria-label to an element, useful for screenreaders. |
enum
| color | size |
|---|---|
"primary" |
"small" |
"secondary" |
"medium" |
"tertiary" |
"large" |
"info" |
|
"success" |
|
"warning" |
|
"critical" |
Functional specs
- If you don’t pass
customColororcolorprop to Icon, it will inherit color from parent container withcurrentColorby default.
Accessibility
- If an icon is used standalone meaning it conveys information by itself use
ariaLabelto help screen readers understand the content. - If an icon is marked or already labeled by surrounding content, use
ariaHiddento hide icon from screen readers.
iconFont
Icon font is available in @kiwicom/orbit-components/orbit-icons-font/orbit-icons folder in these formats ttf, woff2, svg
import iconFont from "@kiwicom/orbit-components/orbit-icons-font/orbit-icons.woff2";