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

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

icons svg react

0.4.0

1 year ago

0.3.0

1 year ago