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.