Migrating react-icons 0.x → 1.0

Edit on GitHub

There’s been a complete overhaul of all Volvo Car icons to enable scalability of size and maintain a unified look and feel across a growing array of product and digital experiences.

The new icons are designed in 2 sizes (16px and 24px) but available for use in all sizes. The Icon component picks the 16px icon for smaller sizes and scales up the 24px icon for larger sizes. The filled prop switches between filled and outlined variants.

You can opt in to the new icon system starting from version 0.21 using the new icon and size props. With 1.0, the type property is completely removed.

Icons previously in the thirdparty category now use a separate BrandedIcon component, because partner and third-party service icons have different constraints for size and colour.

Migration pattern

`<Icon>`

The type prop is replaced by separate icon and size props. If the old type name ended with filled, use the filled prop instead:

0.x `type`	1.0 equivalent
`"delete-24"`	`icon="delete" size={24}`
`"filterfilled-32"`	`icon="filter" size={32} filled`
`"car-car-40"`	`icon="car-car" size={40}`

`<IconButton>`

The iconName prop is replaced by icon. Size suffixes and media- prefixes are removed:

0.x `iconName`	1.0 equivalent
`"media-pause"`	`icon="pause"`
`"media-play"`	`icon="play"`
`"close"`	`icon="close"`

`<BrandedIcon>`

Icons previously prefixed with thirdparty- now use the dedicated BrandedIcon component:

0.x	1.0
`<Icon type="thirdparty-facebook-24">`	`<BrandedIcon icon="facebook" size={24}>`

Before & after

Before (0.x)

import { Icon, IconButton } from '@volvo-cars/react-icons';

<Icon type="delete-24" />
<Icon type="filterfilled-32" />
<Icon type="thirdparty-facebook-24" />
<IconButton iconName="media-pause" />

After (1.0)

import { BrandedIcon, Icon, IconButton } from '@volvo-cars/react-icons';

<Icon icon="delete" size={24} />
<Icon icon="filter" size={32} filled />
<BrandedIcon icon="facebook" size={24} />
<IconButton icon="pause" />

Dynamic icon types

If the icon type is dynamic (e.g. passed as a prop), you can use the compatibility functions that remain available throughout the 1.x lifecycle. These map the old type to the new icon, size, and filled properties.

import { BrandedIcon, Icon, IconButton } from '@volvo-cars/react-icons';
import {
  getBrandedIconPropsFromDeprecatedIconType,
  getIconPropsFromDeprecatedIconType,
  getIconButtonPropsFromDeprecatedIconType,
} from '@volvo-cars/react-icons/compat';

const deprecatedIconType = 'delete-24';
<Icon {...getIconPropsFromDeprecatedIconType(deprecatedIconType)} />;

const deprecatedIconButtonName = 'media-pause';
<IconButton
  {...getIconButtonPropsFromDeprecatedIconType(deprecatedIconButtonName)}
/>;

const deprecatedThirdPartyIconType = 'thirdparty-facebook-24';
<BrandedIcon
  {...getBrandedIconPropsFromDeprecatedIconType(deprecatedThirdPartyIconType)}
/>;

Migration with codemods

Codemods can automatically update Icon and IconButton components to the new API. Replace . with the path to the folder you want to migrate.

npx jscodeshift --transform ./node_modules/@volvo-cars/react-icons/codemods/replace-type-with-icon.cjs --parser tsx --ignore-pattern="*.d.ts" --ignore-pattern="node_modules" .
npx jscodeshift --transform ./node_modules/@volvo-cars/react-icons/codemods/replace-iconbutton-iconname-with-icon.cjs --parser tsx --ignore-pattern="*.d.ts" --ignore-pattern="node_modules" .

After running the codemods, format the output:

yarn prettier --write .