@nimbus-ds/icon

The Icon component is used when we need to illustrate an action, state or text inside or outside another component.

Installation

$ yarn add @nimbus-ds/icon
# or
$ npm install @nimbus-ds/icon

Component Anatomy

The component consists of a vector shape, which uses our Nimbus icons library.

Guidelines

We use this component to reinforce, through an icon, a message, state or action that requires greater emphasis in relation to a text, for example.

Sizes

Icon has 3 predefined sizes large, medium and small and must be used taking into account the component and context in which they will be applied.

AriaLabel

This component does not have text, but it has a tag (Aria Label) to facilitate its identification by people with some type of visual or cognitive limitation. That's why we need to add a description that makes the icon's function clear.

Recommendation for use

• Illustrate states of an order
• Illustrate actions inside a button
• Illustrate a section of the application

Usage

View docs here.