Icons

Overview

A package contains all the icons available within Waffles.

The main export of the package is a set of React components. These can be individually be imported:

import { AddCircleIcon } from '@datacamp/waffles-icons';

All these components accept the same set of properties:

• size – The size in pixels to display the icon. The default is 18. Possible values: 12, 18, and 24.
• color – The color of the icon. This defaults to currentColor, and so will match the surrounding text. If a custom color is required, then this prop can accept any valid CSS color. We recommend using the waffles-tokens to maintain a consistent visual experience.
• className – Any extra className to pass to the root svg element. Can be used to apply any extra custom styling required.

For screen readers to be able to present the icons they all include a default title, however this should be overriden using the title prop if the icon is serving a specific purpose. If the icon is being used purely for decoration, and related text is sufficient, set the aria-hidden prop to true. This will prevent screen readers from announcing its presence.

Examples

All Available Icons

React Native

There are also react-native versions of all these icons. These can be used the same way as on web, the only difference being that instead of className, the style prop can be used to add custom styling. These components can be imported in the same way. When in a react-native environment, this will resolve to the correct version.

import { AddCircleIcon } from '@datacamp/waffles-icons';

Sprites

For those that cannot use react components, there are also svg sprites available in the waffles-icons package. There are five different formats available at the file paths listed below. Check the detailed overview of the differences between these different sprites. Feel free to use whichever makes most sense for your use case.

• @datacamp/waffles-icons/sprites/css/svg/sprite.css-bde2e71c.svg
• @datacamp/waffles-icons/sprites/defs/svg/sprite.defs.svg
• @datacamp/waffles-icons/sprites/stack/svg/sprite.stack.svg
• @datacamp/waffles-icons/sprites/symbol/svg/sprite.symbol.svg
• @datacamp/waffles-icons/sprites/view/svg/sprite.view-f796bea8.svg