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 />;
}

Each icon is also published as an individual module, so you can import it directly. This is useful to avoid loading the whole icon set in environments without tree-shaking (e.g. dev servers):

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

If you use Next.js, adding the package to optimizePackageImports rewrites named imports to direct imports automatically:

// next.config.js
module.exports = {
  experimental: {
    optimizePackageImports: ["@exawizards/exabase-design-system-icons-react"],
  },
};

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

License

exaBase Design System Icons is licensed under the MIT License.

Copyright

©️ ExaWizards Inc.