@exawizards/exabase-design-system-icons-react

exaBase Design System Icons React

exaBase Design System Icons (v1.4.0) for React.

Install

npm i @exawizards/exabase-design-system-icons-react

Usage

import { CheckmarkCircleIcon } from "@exawizards/exabase-design-system-icons/react"


function MyComponent() {
  return (
    <CheckmarkCircleIcon />
  )
}

Size

The default icon size is 16. You can change by the size prop:

<CheckmarkCircleIcon size="20" />

Color

Rendred SVG has fill="currentColor" attribute, so their text color is applied. You can the color by the color CSS property:

<CheckmarkCircleIcon style="{ color: red }" />

Accessibility

The output SVG has role="img" and aria-hidden="true" attribute by default. This causes the SVG element to be ignored by screen readers:

<svg role="img" aria-hidden="true" ... >...</svg>

aria-label

If your icons have semantic meaning, you'll need to manually add aria-label attribute. This will not add the aria-hidden="true" attribute.

<CheckmarkCircleIcon aria-label="Success" />

Output:

<svg role="img" aria-label="Success" ... >
  <path ... />
</svg>

title and titleId

Another option is to use title and titleId:

<CheckmarkCircleIcon title="Success" titleId="success-title" />

Output:

<svg role="img" aria-labelledby="success-title" ... >
  <title id="success-title">Success</title>
  <path ... />
</svg>

Props

Prop	Type	Default	Note
size	number	16	Set icon height and size.
title	string	undefined	Insert a title element into the svg, and remove the aria-hidden="true" from the svg.
titleId	string	undefined	Add an id attribute to the title element, and add an aria-labelledby={titleId} attribute.

License

exaBase Design System Icons is licensed under the MIT License.

Copyright

©️ ExaWizards Inc.