Iconography

The component library offers a number of icons from the Vodafone System Icon Pack as React Components.

The generateIcons script part of the build process is configured to transform SVGs into React components using the SVGR library. All .svg files in src/design-system/assets/icons are used to generate .js files of the same name (in CamelCase format).

The icon components have been configured to support color, space, layout and typography props from styled-system.

The following are the icons currently present in the library as components:

Usage

Each individual icon component is part of the compound Icons component.

import { Icons } from 'ucc-design-system';
Copy

For normalisation purposes, the SVGR custom template script replaces the SVG width and height values by 1em such that the SVG inherits the font-size defined in GlobalStyles. This, in turn, allows us to control the size of the icon using the fontSize prop.

However, the dimensions of the icon can still be controlled using the width and height props.

The resulting component can also receive the color prop to change the color of the icon based on the color tokens.

Adding/Replacing Icon Components

The system comes pre-populated with the above icons. However, in order to add more icons or replace the existing set, the new .svg files need to be added to src/design-system/assets/icons.

npm run generateIcons
Copy

Requirements for the svg files:

• They should come with a stroke or fill of #333333 for the script to work.
• They should be exported from Figma or a similar tool.
• They should not have any <style> tag declared (color tokens will not work).