@adapt-design-system/icons

ADAPT DS Icons

This package basically takes a folder of svg icons and converts them to exported React components.

Import and use

import { IconEmail } from '@adapt-design-system/icons';

<Text fontSize="small">
  Inbox <IconEmail />
</Text>;

Set size and color

By default, the icons are designed to inherit the fontSize and color of their parent. This is to serve the usual case where an icon is used to accompany text and it should generally be the same size and color as the text.

Pass style values to the customStyle prop to add new properties / override the defaults.

Note: The size of the icons is set to 1.1em by default, as generally icons look better when they're slightly larger than their accompanying text. To override this, you can do the following:

<IconEmail customStyle={{width: '1em', height: '1em' }} />

Why is there a negative top margin on the icons?

This is to create a better visual alignment with the text.

To remove it,

<IconEmail customStyle={{marginTop: 0 }} />

Adding New Icons

If the design team have added new icons to the Figma library, you should get them to export SVGs of those icons as 24x24 svgs and drop those files in the icons directory. Note that the react component name will be generated from the filename:

activity-fill.svg -> <IconActivityFill />

Publishing a new version to npm

To publish a new version run yarn publish-package. If you introduce a breaking change, bump the major version (2.0.3 -> 3.0.0). If you add new (non-breaking) functionality bump the minor version (2.0.3 -> 2.1.0). Otherwise bump patch when adding new icons (2.0.3 -> 2.0.4). You will be asked for a new version.

⚠️ Important!

Don't forget to upgrade the consuming packages, in this case /docs, to make use of the new version. Like so: yarn upgrade @adapt-design-system/icons@^2.0.4