Skip to content
Permalink
Branch: master
Find file Copy path
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
43 lines (37 sloc) 2.21 KB

Icon

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 adds aria-hidden to an element, useful for screenreaders.
ariaLabel string Adds prop adds aria-label to an element, useful for screenreaders.

enum

color size
"attention" "small"
"primary" "medium"
"secondary" "large"
"tertiary"
"info"
"success"
"warning"
"critical"

Functional specs

  • If you don't pass customColor or color prop to Icon, it will inherit color from parent container with currentColor by default.

Accessibility

  • If an icon is used standalone meaning it conveys information by itself use ariaLabel to help screen readers understand the content.
  • If an icon is marked or already labeled by surrounding content, use ariaHiddento hide icon from screen readers.
You can’t perform that action at this time.