Skip to content

Latest commit

 

History

History
35 lines (27 loc) · 1.42 KB

migrate-to-7.x.md

File metadata and controls

35 lines (27 loc) · 1.42 KB
Raw

Props

<Icon>

Prop v9 v10
name Points to the icon name Removed (See below)

Notes for v10

The <Icon> component uses the carbon-icons library, which hosts a set of icons built for v9 of the Carbon Design System. In v10, we introduced @carbon/icons-react which offers an updated set of icons built for consumption as React components. However, we will still support both carbon-icons and @carbon/icons-react through v11.

While you can still use the <Icon> component, the name prop has been removed in v10. We removed the name prop in preference of the icon prop which will allow you to tree-shake icons in your build. You can use the icon prop by directly importing icons from carbon-icons and supplying them as the icon prop. For example:

import { Icon } from 'carbon-components-react';
import { iconAdd } from 'carbon-icons';

<Icon icon={iconAdd} />;

This icon prop is a data structure that we use to represent an icon in code. You can pass in your own icons if they follow this data structure. For more information, you can view the icon prop type in addition to the exports from carbon-icons.