Icon

<Icon icon={ExampleIcon} />

<Icon icon={ExampleIcon} />

Introduction

import { Icon } from '@telus-uds/components-base'

A wrapper for svg icons. Takes an icon component from a UDS palette, and renders it with theming applied.

In order for this component to work on native platforms, you will need to have react-native-svg installed as a dependency in your project.

Pass an accessibilityLabel for icons that have a meaning that should be communicated to the user. This will be used by assistive technology such as screen readers.
Don't repeat content in an accessibilityLabel that is already present in text. If an icon's accessibilityLabel would simply repeat the text next to it, it is better to treat the icon as decorative.
If the accessibilityLabel prop is not passed, the icon will treated as purely decorative and will be set as ignorable by assistive technology via the attribute aria-hidden.
If an icon is to be included alongside text and has a meaning related to the text, pass the prop scalesWithText as true so that if a sighted users increases their device's text size, the icon also scales to a size similar to the size they find comfortable for reading.

Name	Type	Default	Description
scalesWithText	bool	false	controls whether the icon size should be proportionate to any accessibility-related font scaling.
variant	objectOf		System variant prop, see variants for more details
tokens	custom		System tokens prop, see tokens for more details
accessibilityLabel	string		Descriptive label used in web SVG title tag for accessibility
icon*	elementType		A valid UDS icon component imported from a UDS palette (e.g.) `import { MyIcon } from @telus-uds/palette-<brand>/build/web/icons`