Codemods

Icons Transform

Converts a v6 Icon component to a v7 Icon component.

Automatic Changes

• Renames the filled prop to isFilled.
• Updates the value of the size prop if possible:
  • "sm" => "xs"
  • "md" => "sm"
  • "lg" => "md"
  • "xl" => "lg"
• Attempts to transform the deprecated theme prop to the color prop. If it cannot, deletes the theme prop.
• Updates component name for the following Icon components:
  • IconAutopay -> IconDollarAutopay
  • IconCaptionsOff -> IconClosedCaptionsOff
  • IconCaptionsOn -> IconClosedCaptions
  • IconCashback -> IconDollarCashback
  • IconDown -> IconArrowDown
  • IconFavorite -> IconStar
  • IconFilterDown -> IconSortDown
  • IconFilterUp -> IconSortUp
  • IconLeft -> IconArrowLeft
  • IconMore -> IconMoreCircle
  • IconRight -> IconArrowRight
  • IconSoundOn -> IconSound
  • IconUp -> IconArrowUp
  • IconWatch -> IconSmartwatch
  • IconWiFi -> IconWifi
  • IconTrends -> IconBarChart
• Updates import source to @americanexpress/dls-icons. Icon components are no longer available in @americanexpress/dls-react as of v7.0.0.

For example:

1import { IconAccessibility } from '@americanexpress/dls-react6';
2import { IconWarning } from '@americanexpress/dls-icons6';
3
4export default function Page() {
5  return (
6    <>
7      <IconAccessibility
8        title="Accessibility"
9        titleId="accessibility-icon-id"
10        filled={true}
11        size="sm"
12        theme={dlsBrightBlue}
13      />
14      <IconWarning
15        title="Warning"
16        titleId="warning-icon-id"
17        filled={true}
18        size="md"
19        theme={dlsColorWarning}
20      />
21    </>
22  );
23}

Transforms into:

1import { IconAccessibility, IconWarning } from '@americanexpress/dls-icons';
2
3export default function Page() {
4  return (
5    <>
6      <IconAccessibility
7        title="Accessibility"
8        titleId="accessibility-icon-id"
9        isFilled={true}
10        size="xs"
11        color="brand"
12      />
13      <IconWarning
14        title="Warning"
15        titleId="warning-icon-id"
16        isFilled={true}
17        size="sm"
18        color="error"
19      />
20    </>
21  );
22}