Icons

The build process is configured to transform SVGs into React components, using SVGR. The script looks for all .svg files in packages/ds/src/components/icons and generates a .tsx file of the same name.

The components support space, color, layout & typography styled-system props.

Usage

As a compound Icons component

import { Icons } from 'ds';
Copy

<Icons.CheckboxChecked title="checkbox checked" color="text.primary" />

The icon generator script replaces the SVG width and height values by 1em to make the SVG size inherit the font-size. Which, in turn, allows you to control the size of the icon using the fontSize prop.

However, you can still control the size of the icon using the width and height props.

By using the fill or stroke as currentColor allows the icons to inherit the text color.

Adding or Modifying Icons

Add or replace .svg files in packages/ds/src/components/icons. The design system comes pre-populated with a few icons, which must either be preserved or replaced with similar icons.

Each SVG icon must conform to the following:

• Use a square viewBox attribute, preferably 0 0 24 24.
• Use currentColor for strokes and fills. Or configure SVGR to make that change.
• Ideally, only use <path> elements and avoid transforms.

Accessibility

Icons are visual elements that can either be purely decorative or act as shorthand to convey a message.

When used for decorative purposes, ensure that it is ignored by screen readers, by setting the aria-hidden attribute.

<Icons.RadioChecked color="text.primary" aria-hidden />

When used for non-decorative purposes, it must have a proper alternative text set via title props.

<Icons.Loader color="text.primary" title="waiting for content to load" />