Icon | Seeds

Components

Icon

Icons symbolize common actions, features, and themes throughout our app.

Unless an icon is purely decorative, an aria-label attribute should be provided so that users who take advantage of screen readers can understand the content. If an icon is purely decorative, set aria-hidden="true" so that it is not picked up by screen readers.

import { Icon } from '@sproutsocial/racine'

Properties

Name Type Default Description Required?
name

EnumIconNames

Name of the icon in the svg sprite

size

"mini"

"default"

"medium"

"large"

"jumbo"

"default"
fixedWidth boolean false

Whether the icon should have a fixed width or not. Use this when you need to align icons/text vertically in a list.

ariaLabel string

Label used to describe the icon if not used with an accompanying visual label

Subcomponents

Icon Toggle

In some cases, icons represent a stateful action that has both an inactive and active state. In these cases we use outline icons to represent the inactive state, and filled icons to represent the active state.

The Icon Toggle component can be used to animate between these two states.

Name Type Default Description Required?
activeName EnumIconNames

Name of the icon to be shown in the active state

inactiveName EnumIconNames

Name of the icon to be shown in the inactive state

isActive boolean

Whether the active icon should be shown or not

size

"mini"

"default"

"medium"

"large"

"jumbo"

"default"
fixedWidth boolean false
ariaLabel string

Find icons

Depending on where you work, there are several ways to browse and discover our icons:

[ad_2]

Leave a comment

Your email address will not be published. Required fields are marked *