Codemods

Glyphs Transform

Glyph components are deprecated in v7. Therefore, this transform converts a v6 Glyph component to its equivalent v7 Icon component.

Automatic Changes

• Updates the value of the size prop if possible:
  • "sm" => "xs"
  • "md" => "sm"
  • "lg" => "md"
• Attempts to transform the deprecated theme prop to the color prop. If it cannot, deletes the theme prop.
• Updates component name for all Glyph components:
  • Glyph -> Icon
  • GlyphAccount -> IconAccount
  • GlyphCancelCircle -> IconCancelCircle
  • GlyphCheck -> IconCheck
  • GlyphClose -> IconClose
  • GlyphDoubleLeft -> IconChevronDoubleLeft
  • GlyphDoubleRight -> IconChevronDoubleRight
  • GlyphDown -> IconArrowDown
  • GlyphEqual -> IconEqual
  • GlyphFavorite -> IconStar
  • GlyphInfo -> IconInfo
  • GlyphLeft -> IconArrowLeft
  • GlyphLinkOut -> IconLinkOut
  • GlyphMinus -> IconMinus
  • GlyphNav -> IconMenu
  • GlyphPlusCircle -> IconPlusCircle
  • GlyphPlus -> IconPlus
  • GlyphRight -> IconArrowRight
  • GlyphSortDown -> IconSortDown
  • GlyphSortUp -> IconSortUp
  • GlyphUp -> IconArrowUp
• 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 { GlyphAccount } from '@americanexpress/dls-react6';
2import { GlyphCheck } from '@americanexpress/dls-icons6';
3
4export default function Page() {
5  return (
6    <>
7      <GlyphAccount
8        title="Account"
9        titleId="account-glyph-id"
10        size="sm"
11        theme={dlsBrightBlue}
12      />
13      <GlyphCheck
14        title="Check"
15        titleId="check-glyph-id"
16        size="sm"
17        theme={dlsBrightBlue}
18      />
19    </>
20  );
21}

Transforms into:

1import { IconAccount, IconCheck } from '@americanexpress/dls-icons';
2
3export default function Page() {
4  return (
5    <>
6      <IconAccount
7        title="Account"
8        titleId="account-glyph-id"
9        size="xs"
10        color="brand"
11      />
12      <IconCheck
13        title="Check"
14        titleId="check-glyph-id"
15        size="xs"
16        color="brand"
17      />
18    </>
19  );
20}