Components

Icon

<Icon />

Component wrapping @carbon/icons-react. List of all icons can be found here: https://www.carbondesignsystem.com/guidelines/icons/library/ but keys are not always 1 to 1 in a relation to the icons-react library. If you have problem verifying the key of given icon - you can always open the Chrome Terminal (with AdminBro open) and write there:

Object.keys(CarbonIcons)

to see list of all possible icon keys.

Usage

import { Icon, IconProps } from '@admin-bro/design-system'
See:

View Source admin-bro-design-system/src/atoms/icon.tsx, line 89

Examples

Icons inside other elements

Different sizes

Big rounded icon with background

Type Definitions

object

# IconProps

Prop Types of an Icon component. Apart from props defined below it extends all ColorProps and SpaceProps

Properties:
Name Type Attributes Description
... string <optional>

Other props from ColorProps and SpaceProps

icon string <optional>

CamelCased name of an icon from https://www.carbondesignsystem.com/guidelines/icons/library/

size 16 | 20 | 24 | 32 <optional>

Size variant. Default to 16

color string <optional>

Icon color

bg string <optional>

Icon background

rounded boolean <optional>

If background should be rounded

spin boolean <optional>

Indicates if given icons should spin

View Source admin-bro-design-system/src/atoms/icon.tsx, line 107