@sproutsocial/racine 13.3.0 → 13.4.0

package/CHANGELOG.md

@@ -1,5 +1,44 @@
 # Change Log
 
+## 13.4.0
+
+### Minor Changes
+
+- b6f0228d: Adds Icon Library codemod to address upcoming breaking changes
+
+  **Deprecation Notice**: Upcoming breaking changes to the Icon component and tooling
+
+  In Q1 2023, we will be making several major changes to the Icon component. Key changes:
+
+  - Icon assets will be stored in a new package called @sproutsocial/seeds-icons. This will allow consumers of Racine to update to the latest icons without waiting for Racine to release an update. @sproutsocial/seeds-icons will be a peer and dev dependency of Racine.
+  - Most icons will have solid and outline variants, with outline being the default. Variants can be included in the icon name (e.g., `bell-solid`) or as a prop (e.g., `<Icon name=”bell” variant=”solid” />`).
+  - Icons will be renamed to use descriptive instead of prescriptive naming. For instance, the `ads` icon will be renamed to `dollar-outline` so that its name will visually describe the icon instead of prescribing its intended usage.
+
+  Due to the scale of the changes, we are unable to make the changes backwards-compatible. You can preview the migration process below, but you should not complete the migration until these changes are released.
+
+  Migration steps:
+
+  - Dependencies: Add @sproutsocial/seeds-icons to your application’s dependencies.
+  - Sprites: Instead of using icon.svg from Racine’s dist/ directory, the sprites should be imported from @sproutsocial/seeds-icons for each category of icons you want to include. Attach these spritesheets to the DOM in the same way you do icon.svg.
+  - Icon names: Most icon names are changing as a part of this refactor. Run the `icon-library` codemod to automatically update as many icon names as possible. For more information on how to use Racine codemods, view [our Migration docs on Seeds](https://seeds.sproutsocial.com/components/migration).
+
+- f84feaf3: Adds icon-name-substitution codemod
+  - This codemod complements the existing icon-library codemod, helping to automate icon name updates that cannot be automatically handled by the icon-library codemod.
+  - The codemod replaces string literals that are deprecated icon names with their updated names. Please note that this codemod will change any strings that happen to match a deprecated icon name, even if they are unrelated to icons, so we recommend running it against specific files (not your entire codebase) and carefully checking the results.
+  - Use `racine-codemod icon-name-substitution` to run this codemod and view the docs
+
+### Patch Changes
+
+- f84feaf3: Fixes icon-library codemod bugs
+
+  The following unwanted behaviors have been removed:
+
+  - Erroneously removing the first comment in a file
+  - Erroneously removing the Icon import when Icon is still being used for a styled component or for "typeof Icon"
+  - Incorrect parsing of the "components" argument, leading to it not being used
+  - Adding multiple shim imports if there are multiple @sproutsocial/racine imports in the same file
+  - Breaking aliased and type imports from @sproutsocial/racine
+
 ## 13.3.0
 
 ### Minor Changes

package/bin/racine-codemod.js

@@ -6,6 +6,7 @@
 const childProcess = require('child_process');
 const fs = require('fs');
 const path = require('path');
+const docs = require('../codemods/codemod-docs');
 
 const currentDir = process.cwd();
 process.chdir(__dirname);
@@ -13,22 +14,46 @@ process.chdir(__dirname);
 const codemods = fs
   .readdirSync('../codemods')
   .filter((x) => x.slice(-3) === '.js')
-  .map((x) => x.slice(0, -3));
+  .map((x) => x.slice(0, -3))
+  .filter((x) => x !== 'codemod-docs');
 
 const transform = process.argv[2];
 const dest = process.argv[3];
-const usage = `npx racine-codemod <transform> <path/to/code>\n`;
+const usage = `racine-codemod <transformName> <path> <...otherArgs>\n`;
 if (!transform || codemods.indexOf(transform) === -1) {
   console.log(usage);
   console.error(
-    'missing/invalid transform name. Pick one of:\n' +
+    'Missing/invalid transform name. Pick one of:\n' +
       codemods.map((x) => '- ' + x).join('\n')
   );
   process.exit(1);
 }
+
+const formatCodemodDocs = (docs) => {
+  return `  Description: ${docs.description}
+  Usage: ${docs.example}
+  Arguments:
+${Object.entries(docs.arguments)
+  .map(([argumentName, argumentDocs]) => {
+    return `  --${argumentName}
+    Description: ${argumentDocs.description}
+    Default: ${argumentDocs.default}
+    ${
+      argumentDocs.options
+        ? `Options: ${argumentDocs.options}`
+        : `Example: ${argumentDocs.example}`
+    }`;
+  })
+  .join('\n')}`;
+};
+
+// If a path argument is not passed, log the available arguments and example usage for the codemod.
 if (!dest) {
-  console.log(usage);
-  console.error('missing path to code.');
+  console.log(
+    docs[transform]
+      ? formatCodemodDocs(docs[transform])
+      : 'Missing path argument'
+  );
   process.exit(1);
 }
 
@@ -39,6 +64,12 @@ const cmd = `npx jscodeshift -- --parser=flow -t ${path.join(
   ...process.argv,
 ]
   .slice(4)
+  // Remove any spaces from args. Otherwise, anything after the space will be treated as a path argument.
+  .map((arg) => arg.replace(/\s/g, ''))
   .join(' ')}`;
 console.log('running', cmd);
-childProcess.execSync(cmd);
+childProcess.execSync(cmd, {stdio: 'inherit'});
+
+console.log(
+  `Codemod complete! Please run prettier on "${dest}" to fix any formatting issues caused by the codemod.`
+);

package/codemods/__tests__/icon-library.test.js

@@ -0,0 +1,224 @@
+jest.autoMockOff();
+const defineInlineTest = require('jscodeshift/dist/testUtils').defineInlineTest;
+const transform = require('../icon-library');
+
+describe('icon-library codemod', () => {
+  function createTest(testName, input, output, options = {}) {
+    return defineInlineTest(
+      transform,
+      {parser: 'flow', ...options},
+      input,
+      output,
+      testName
+    );
+  }
+
+  createTest(
+    'No changes for already-migrated icons',
+    `<Icon name='dollar-outline' />`,
+    `<Icon name='dollar-outline' />`
+  );
+
+  createTest(
+    'Simple replacement',
+    `<Icon name='ads' />`,
+    `<Icon name='dollar-outline' />`
+  );
+
+  createTest(
+    'deprecatedIcons',
+    `<Icon name='backtotop' />`,
+    `<Icon name='arrow-up-outline' />`
+  );
+
+  createTest(
+    'Handle subcomponents',
+    `<Icon.Toggle activeName='like' inactiveName='like-outline'/>;`,
+    `<Icon.Toggle activeName='thumbs-up-solid' inactiveName='thumbs-up-outline'/>;`
+  );
+
+  createTest(
+    'ssiconsvg regex replacements',
+    `<use
+    xlink:href="#ssiconsvg-rejected"
+    xmlns:xlink="http://www.w3.org/1999/xlink"
+  />`,
+    `<use
+    xlink:href="#seeds-svgs_ban-outline"
+    xmlns:xlink="http://www.w3.org/1999/xlink"
+  />`
+  );
+
+  createTest(
+    'icon/iconName regex replacements',
+    `expect(queryByDataQaLabel({icon: 'dashboard'})).toBeFalsy();
+    const iconMap = {iconName: "like"};
+    const iconName = 'reply';`,
+    `expect(queryByDataQaLabel({icon: 'gauge-outline'})).toBeFalsy();
+    const iconMap = {iconName: "thumbs-up-solid"};
+    const iconName = 'reply-solid';`
+  );
+
+  createTest(
+    'Add comments',
+    `import { Badge, Icon } from '@sproutsocial/racine';
+
+<>
+  <Icon name='dashboard' />
+  <Icon name='not-a-real-name' />
+  <Badge iconName={iconName} />
+</>`,
+    `/*TODO (icon-library codemod): Please manually migrate icon names passed to 2 component(s) in this file.
+   Look for usages of these components: Icon, Badge*/
+import { Badge, Icon } from '@sproutsocial/racine';
+
+<>
+  <Icon name='gauge-outline' />
+  <Icon name='not-a-real-name' />
+  <Badge iconName={iconName} />
+</>`
+  );
+
+  // Test shim component adding behavior with a mix of cases.
+  // The valid name Icon is migrated.
+  // The invalid string name Icon prompts a comment. The shim would not help map an invalid string name.
+  // The variable name Icon is converted to IconShim and does not contribute to the count of issues in the comment.
+  createTest(
+    'Add shim component and add comments',
+    `import { Icon } from '@sproutsocial/racine';
+
+<>
+  <Icon name='dashboard' />
+  <Icon name='not-a-real-name' />
+  <Icon name={iconName} />
+</>`,
+    `/*TODO (icon-library codemod): Please manually migrate icon names passed to 1 component(s) in this file.
+   Look for usages of these components: Icon*/
+import { Icon } from '@sproutsocial/racine';
+
+import { IconShim } from 'script/core/react/IconShim';
+
+<>
+  <Icon name='gauge-outline' />
+  <Icon name='not-a-real-name' />
+  <IconShim name={iconName} />
+</>`,
+    {
+      shimName: 'IconShim',
+      shimImportPath: 'script/core/react/IconShim',
+    }
+  );
+
+  createTest(
+    'Add shim, remove Icon import',
+    `import { Icon } from '@sproutsocial/racine';
+
+<Icon name={iconName} />`,
+    `import { IconShim } from 'script/core/react/IconShim';
+
+<IconShim name={iconName} />
+`,
+    {
+      shimName: 'IconShim',
+      shimImportPath: 'script/core/react/IconShim',
+    }
+  );
+
+  createTest(
+    'Add shim, keep Icon import due to styled usage',
+    `import { Icon } from '@sproutsocial/racine';
+const StyledIcon = styled(Icon);
+<Icon name={iconName} />`,
+    `import { Icon } from '@sproutsocial/racine';
+import { IconShim } from 'script/core/react/IconShim';
+const StyledIcon = styled(Icon);
+<IconShim name={iconName} />
+`,
+    {
+      shimName: 'IconShim',
+      shimImportPath: 'script/core/react/IconShim',
+    }
+  );
+
+  createTest(
+    'Add shim, keep Icon import due to typeof Icon usage',
+    `import { Icon } from '@sproutsocial/racine';
+const iconType = typeof Icon;
+<Icon name={iconName} />;`,
+    `import { Icon } from '@sproutsocial/racine';
+import { IconShim } from 'script/core/react/IconShim';
+const iconType = typeof Icon;
+<IconShim name={iconName} />;
+`,
+    {
+      shimName: 'IconShim',
+      shimImportPath: 'script/core/react/IconShim',
+    }
+  );
+
+  createTest(
+    'Retain first comments when Icon import is removed',
+    `// @flow
+import { Icon } from '@sproutsocial/racine';
+
+<Icon name={iconName} />`,
+    `// @flow
+import { IconShim } from 'script/core/react/IconShim';
+
+<IconShim name={iconName} />
+`,
+    {
+      shimName: 'IconShim',
+      shimImportPath: 'script/core/react/IconShim',
+    }
+  );
+
+  createTest(
+    'Retain first comments and add new comments',
+    `// @flow
+import { Badge, Icon } from '@sproutsocial/racine';
+
+<>
+  <Icon name='dashboard' />
+  <Icon name='not-a-real-name' />
+  <Badge iconName={iconName} />
+</>`,
+    `// @flow
+/*TODO (icon-library codemod): Please manually migrate icon names passed to 2 component(s) in this file.
+   Look for usages of these components: Icon, Badge*/
+import { Badge, Icon } from '@sproutsocial/racine';
+
+<>
+  <Icon name='gauge-outline' />
+  <Icon name='not-a-real-name' />
+  <Badge iconName={iconName} />
+</>`
+  );
+
+  createTest(
+    'Test "components" option',
+    `
+<>
+  <Icon name='dashboard' />
+  <Message.Header iconName='reply' />
+  <SearchInput iconLeft='search' iconRight='x' />
+</>`,
+    `
+<>
+  <Icon name='gauge-outline' />
+  <Message.Header iconName='reply-solid' />
+  <SearchInput iconLeft='magnifying-glass-outline' iconRight='x-outline' />
+</>`,
+    {
+      // This tests if the following argument was passed to `racine-codemod`:
+      // --components="{'Message.Header':['iconName'],SearchInput:['iconLeft','iconRight']}"
+      // Unfortunately, because it's getting passed directly to the transform in this case,
+      // We need to simulate the way that it gets mangled when passed through the console.
+      components: [
+        'Message.Header:[iconName]',
+        'SearchInput:[iconLeft',
+        'iconRight]',
+      ],
+    }
+  );
+});

package/codemods/__tests__/icon-name-substitution.test.js

@@ -0,0 +1,39 @@
+jest.autoMockOff();
+const defineInlineTest = require('jscodeshift/dist/testUtils').defineInlineTest;
+const transform = require('../icon-name-substitution');
+
+describe('icon-name-substitution codemod', () => {
+  function createTest(testName, input, output, options = {}) {
+    return defineInlineTest(
+      transform,
+      {parser: 'flow', ...options},
+      input,
+      output,
+      testName
+    );
+  }
+
+  createTest(
+    'No changes for already-migrated icon names. Empty output due to returning null.',
+    `const IconMap = {ads: 'dollar-outline', draft: 'paper-solid'};`,
+    ''
+  );
+
+  createTest(
+    'Simple replacements',
+    `const IconMap = {ads: 'ads', draft: 'drafts'}`,
+    `const IconMap = {ads: 'dollar-outline', draft: 'paper-solid'}`
+  );
+
+  createTest(
+    'Example of an expected but unwanted change: the "ads" key and value are both mapped.',
+    `const IconMap = {'ads': 'ads', 'draft': 'drafts'}`,
+    `const IconMap = {'dollar-outline': 'dollar-outline', 'draft': 'paper-solid'}`
+  );
+
+  createTest(
+    'deprecatedIcons',
+    `const name = 'backtotop';`,
+    `const name = 'arrow-up-outline';`
+  );
+});

package/codemods/codemod-docs.js

@@ -0,0 +1,54 @@
+// Ideally, docs would be colocated with the codemod they are for, but I don't know how to make that work because
+// the transform needs to be the only export from the codemod file in order for jscodeshift to know how to find it.
+
+// Reused arguments
+const quote = {
+  default: 'single',
+  options: 'single|double',
+  description:
+    'What kind of quotation marks should be preferred when converting updated files back to JS?',
+};
+
+module.exports = {
+  'icon-library': {
+    description:
+      'Assists in migrating Icon names and usages. Due to abstraction such as using variables and mappings to define icon names, the codemod cannot automatically migrate every icon name. To help you identify these cases, the codemod can add comments or shim component usages.',
+    example:
+      "racine-codemod icon-library src --components=\"{IconButton:['name'],MessageMeta:['iconNameLeft','iconNameRight']}\" --shimComponent=IconShim --shimImportPath=src/components/IconShim --quote=double --addComments=false",
+    arguments: {
+      quote,
+      addComments: {
+        default: 'true',
+        options: 'true|false',
+        description:
+          'Should code comments be added when the codemod identifies a case that cannot be automatically migrated? Comments will include "icon-library" to help you locate and remediate them.',
+      },
+      components: {
+        default: '"{}"',
+        example:
+          "\"{IconButton:['name'],MessageMeta:['iconNameLeft','iconNameRight']}\"",
+        description:
+          'What additional component names + prop name combinations would you like the codemod to target for the migration? Wrap this argument in quotes.',
+      },
+      shimName: {
+        default: '""',
+        example: 'IconShim',
+        description:
+          "If you provide a shim component name, any Icon that has a variable for its `name` prop will be renamed to the shim component's name. You must create this component in your own codebase, it is not provided.",
+      },
+      shimImportPath: {
+        default: '""',
+        example: 'src/components/IconShim',
+        description:
+          'shimImportPath is the import path for your shim component (see "shimName") so that imports can be automatically when usages are added.',
+      },
+    },
+  },
+  'icon-name-substitution': {
+    description:
+      'Replaces string literals that are deprecated icon names with their updated names. Please note that this codemod will change any strings that happen to match a deprecated icon name, even if they are unrelated to icons, so we recommend running it against specific files (not your entire codebase) and carefully checking the results.',
+    example:
+      'racine-codemod icon-name-substitution src/constants.js --quote=double',
+    arguments: {quote},
+  },
+};

package/codemods/icon-library.js

@@ -0,0 +1,315 @@
+// We need the deprecated icon name mapping so that we can migrate icons still
+// using the ancient names all the way to the new names.
+// prettier-ignore
+const deprecatedNames = {backtotop: 'back-to-top', 'circle-check-filled': 'circle-check', 'circle-check-no-fill': 'circle-check', 'circle-check-inverse-outline': 'circle-check-outline', 'circle-check-inverse': 'circle-check-outline', 'circle+-filled': 'circle+', 'circlex-filled': 'circlex', 'circle+-nofill': 'circle+', 'circlex-nofill': 'circlex', creditcard: 'credit-card', 'direct-message': 'messages', 'facebook-nofill': 'facebook', googleanalytics: 'google-analytics-color', 'instagram-brand-keyword': 'hashtag', 'help-white': 'help', 'info-white': 'info', 'instagram-nofill': 'instagram', 'key-circle': 'key', 'key-square': 'key', 'linkedin-nofill': 'linkedin', 'listening-home': 'listening', 'location-pub': 'location', 'location-pub-outline': 'location-outline', 'publishing-calendar': 'calendar', qrcode: 'qr-code', 'sparkles-solid': 'sparkles', 'star-inverse': 'star-outline', 'triangle-white': 'triangle', 'triangle-nofill': 'triangle', 'tripadvisor-circle-filled': 'tripadvisor-circle', 'tripadvisor-circle-empty': 'tripadvisor-circle-outline', 'tumblr-square': 'tumblr', 'tumblr-nofill': 'tumblr', 'twitter-business-mention': 'search', 'verified-nofill': 'verified', 'window-maximize-solid': 'window-maximize'};
+
+// Mapping from old icon names to new icon names
+// prettier-ignore
+const IconMap = {'active-listener': 'listening-outline', 'add-item': 'plus-outline', 'add-keyword': 'plus-outline', 'add-team-member': 'user-plus-outline', 'add-variable': 'curly-brackets-plus-outline', 'address-card-outline': 'profile-card-outline', 'address-card-solid': 'profile-card-solid', ads: 'dollar-outline', 'advocacy-outline': 'advocacy-outline', advocacy: 'advocacy-solid', 'approval-indicator-outline': 'stamp-outline', 'approval-indicator': 'stamp-solid', archive: 'file-box-outline', 'arrow-down-line': 'arrow-down-to-line-outline', 'arrow-down': 'arrow-down-outline', 'arrow-left-line': 'arrow-left-to-line-outline', 'arrow-left': 'arrow-left-outline', 'arrow-right-line': 'arrow-right-to-line-outline', 'arrow-right': 'arrow-right-outline', 'arrow-up-line': 'arrow-up-to-line-outline', 'arrow-up': 'arrow-up-outline', arrows: 'arrows-up-down-left-right-outline', 'asset-library-outline': 'asset-library-outline', 'asset-library': 'asset-library-solid', assign: 'sitemap-outline', atom: 'atom-outline', audio: 'audio-outline', 'back-to-top': 'arrow-up-outline', 'bambu-icon-outline': 'bambu-outline', 'bambu-icon': 'bambu-solid', barcode: 'barcode-outline', basketball: 'basketball-outline', 'bell-outline': 'bell-outline', bold: 'bold-outline', book: 'book-outline', 'bookmark-filled': 'bookmark-solid', bookmark: 'bookmark-outline', bot: 'robot-outline', browser: 'window-full-outline', 'bulk-select': 'square-check-outline', business: 'briefcase-outline', 'calendar-outline': 'calendar-outline', calendar: 'calendar-solid', 'camera-outline': 'camera-outline', 'camera-story': 'camera-story-solid', camera: 'camera-solid', campaign: 'megaphone-outline', carousel: 'carousel-outline', 'cart-plus': 'cart-plus-outline', check: 'check-outline', 'chevron-down-filled': 'caret-down-outline', 'chevron-down': 'chevron-down-outline', 'chevron-left': 'chevron-left-outline', 'chevron-right': 'chevron-right-outline', 'chevron-up-down-filled': 'caret-up-down-outline', 'chevron-up-filled': 'caret-up-outline', 'chevron-up': 'chevron-up-outline', 'circle-check-outline': 'circle-check-outline', 'circle-check': 'circle-check-solid', circle: 'circle-no-fill-outline', 'circle+': 'plus-outline', circles: 'large-circle-small-circle-outline', circleX: 'circle-x-outline', circlex: 'circle-x-outline', 'click-to-view': 'hand-pointer-clicking-outline', clicks: 'pointer-outline', 'clipboard-outline': 'clipboard-outline', clipboard: 'clipboard-solid', clock: 'clock-outline', 'closed-captioning': 'closed-caption-outline', cloud: 'cloud-outline', code: 'code-outline', columns: 'columns-outline', 'comment-alt-outline': 'comments-outline', 'comment-alt': 'comment-solid', 'comment-lines-alt-outline': 'comment-outline', comment: 'comments-outline', 'compact-density': 'bars-density-small-outline', 'compact-indicator': 'bars-density-small-outline', comparison: 'diamond-vs-outline', competitor: 'office-building-outline', compose: 'pencil-to-square-outline', 'content-suggestions': 'comment-sparkle-outline', 'credit-card': 'credit-card-outline', crop: 'crop-outline', crown: 'crown-outline', dashboard: 'gauge-outline', 'deconstructed-negative-sentiment': 'expression-frown-outline', 'deconstructed-neutral-sentiment': 'expression-neutral-outline', 'deconstructed-positive-sentiment': 'expression-smile-open-outline', discovery: 'compass-outline', 'dislike-outline': 'thumbs-down-outline', dislike: 'thumbs-down-solid', 'dm-link-outline': 'comment-plus-outline', 'dm-link': 'comment-plus-solid', 'doesnt-recommend': 'comment-star-slash-outline', dotdotdot: 'ellipsis-horizontal-outline', download: 'arrow-down-to-bracket-outline', 'drafts-outline': 'paper-outline', drafts: 'paper-solid', 'duplicate-outline': 'papers-outline', duplicate: 'papers-solid', 'emoji-outline': 'face-smile-outline', emoji: 'face-smile-solid', 'empty-image': 'camera-x-outline', 'engagement-per-post': 'comment-outline', engagements: 'comments-outline', error: 'circle-exclamation-outline', 'exchange-alt': 'arrows-left-right-outline', 'expanded-indicator': 'bars-density-large-outline', export: 'square-round-arrow-up-right-outline', 'extended-circles': 'large-circle-small-circle-outline', 'external-link-alt': 'squares-arrow-up-right-outline', 'external-link': 'square-round-arrow-up-right-outline', 'extreme-negative-sentiment': 'face-frown-open-outline', 'eye-outline': 'eye-outline', 'eye-slash-outline': 'eye-slash-outline', 'eye-slash': 'eye-slash-solid', eye: 'eye-solid', 'facebook-branded-content-outline': 'handshake-outline', 'facebook-branded-content': 'handshake-solid', feeds: 'unordered-list-outline', female: 'symbol-venus-outline', 'file-chart-line': 'paper-bars-outline', 'file-edit': 'paper-pencil-outline', 'file-times-solid': 'paper-x-outline', filter: 'filter-outline', 'flag-outline': 'flag-outline', flag: 'flag-solid', 'folder-open': 'folder-open-outline', folder: 'folder-outline', 'follow-outline': 'user-plus-outline', follow: 'user-plus-solid', 'follower-increase': 'user-arrow-up-outline', following: 'user-check-outline', font: 'font-case-outline', 'full-access': 'circle-fill-outline', gear: 'gear-outline', gears: 'gear-outline', glasses: 'glasses-outline', globe: 'globe-outline', grip: 'grip-lines-vertical-outline', h1: 'h1-outline', h2: 'h2-outline', h3: 'h3-outline', h4: 'h3-outline', hamburger: 'horizontal-lines-outline', hashtag: 'hashtag-outline', headset: 'headset-outline', 'heart-outline': 'heart-outline', heart: 'heart-solid', heartbeat: 'heart-pulse-outline', 'help-alt': 'question-mark-outline', help: 'circle-question-outline', hiking: 'person-hiking-outline', history: 'clock-rotate-left-outline', home: 'house-outline', hourglass: 'hourglass-outline', 'image-caption': 'rectangle-caption-outline', image: 'image-outline', images: 'images-outline', 'impressions-per-post': 'comment-eye-outline', impressions: 'eye-outline', 'inactive-listener': 'file-box-outline', 'inbox-action': 'inbox-check-outline', 'inbox-views': 'inboxes-outline', inbox: 'inbox-outline', indicator: 'circle-fill-outline', industry: 'office-building-outline', info: 'circle-i-outline', 'internal-activity-outline': 'clock-rotate-left-outline', 'internal-activity': 'clock-rotate-left-solid', italic: 'italics-outline', key: 'key-outline', keyboard: 'keyboard-outline', 'laptop-phone': 'laptop-mobile-outline', 'large-density': 'bars-density-large-outline', lift: 'circle-dollar-arrow-up-outline', 'like-outline': 'thumbs-up-outline', like: 'thumbs-up-solid', link: 'link-outline', 'list-ol': 'ordered-list-outline', listening: 'listening-outline', lists: 'unordered-list-outline', 'location-outline': 'location-pin-outline', location: 'location-pin-solid', lock: 'lock-outline', 'magic-wand': 'magic-wand-outline', male: 'symbol-mars-outline', mention: 'symbol-at-outline', 'message-preview-outline': 'eye-outline', 'message-preview': 'eye-solid', message: 'comment-outline', 'messages-outline': 'envelope-outline', messages: 'envelope-solid', 'metric-table': 'metric-table-outline', minus: 'minus-outline', mobile: 'mobile-outline', monitor: 'pulse-outline', moon: 'moon-crescent-outline', 'negative-sentiment': 'face-frown-outline', 'neutral-positive-sentiment': 'face-smile-outline', 'neutral-sentiment': 'face-neutral-outline', 'new-trend': 'fire-outline', newspaper: 'newspaper-outline', 'no-access': 'circle-minus-outline', 'no-notifications-filled': 'bell-slash-solid', 'no-notifications': 'bell-slash-outline', notepad: 'clipboard-outline', 'notifications-publishing': 'alarm-clock-outline', notifications: 'bell-outline', offline: 'wifi-slash-outline', online: 'wifi-outline', 'paid-promotion-outline': 'circle-dollar-outline', 'paid-promotion': 'circle-dollar-solid', paid: 'calculator-outline', paint: 'paint-can-outline', palette: 'art-palette-outline', paperclip: 'paperclip-outline', pause: 'pause-outline', 'pencil-outline': 'pencil-outline', pencil: 'pencil-solid', person: 'user-outline', phone: 'phone-outline', 'pinterest-boards-outline': 'mood-boards-outline', 'pinterest-boards': 'mood-boards-solid', 'play-circle': 'play-outline', play: 'play-outline', plug: 'plug-outline', plus: 'plus-outline', 'positive-sentiment': 'face-smile-open-outline', 'power-up-outline': 'lightning-bolt-outline', 'power-up': 'lightning-bolt-solid', 'profile-connect': 'leaf-plus-outline', 'profile-disconnect': 'leaf-minus-outline', 'publishing-outline': 'paper-plane-outline', publishing: 'paper-plane-outline', 'puzzle-piece': 'puzzle-piece-outline', 'qr-code': 'qr-code-outline', queue: 'queue-outline', recommendation: 'comment-star-outline', referrals: 'star-full-outline', refresh: 'arrows-rotate-outline', rejected: 'ban-outline', 'reply-outline': 'reply-outline', reply: 'reply-solid', 'reporting-period': 'calendar-range-outline', reporting: 'chart-bar-simple-outline', 'reports-home': 'four-squares-outline', reports: 'chart-pie-outline', retweet: 'repost-outline', rss: 'rss-outline', sales: 'dollar-outline', 'save-assets': 'asset-library-plus-outline', 'saved-messages': 'comment-bookmark-outline', 'saved-reply-outline': 'bookmark-reply-outline', 'saved-reply': 'bookmark-reply-solid', search: 'magnifying-glass-outline', 'sent-message-outline': 'inbox-arrow-up-outline', 'sent-message': 'inbox-arrow-up-solid', share: 'square-round-arrow-up-right-outline', 'shopping-bag-outline': 'shopping-bag-outline', 'shopping-bag': 'shopping-bag-solid', 'show-navigation': 'browser-nav-bar-outline', 'small-density': 'bars-density-medium-outline', smiley: 'face-smile-outline', 'some-access': 'circle-half-outline', sparkles: 'sparkle-outline', 'spike-alert': 'comment-exclamation-outline', 'star-half-alt-solid': 'star-half-outline', 'star-of-life': 'star-of-life-outline', 'star-outline': 'star-outline', star: 'star-full-outline', 'sticky-note-outline': 'note-outline', 'sticky-note': 'note-solid', story: 'camera-story-outline', stories: 'story-outline', suggestions: 'comment-light-bulb-outline', sun: 'sun-outline', 'tag-outline': 'tag-outline', tag: 'tag-solid', 'targeting-outline': 'bullseye-arrow-outline', targeting: 'bullseye-arrow-solid', 'tasks-outline': 'thumbtack-outline', tasks: 'thumbtack-solid', 'team-conversation-outline': 'sprout-leaf-lightning-bolt-outline', 'team-conversation': 'sprout-leaf-lightning-bolt-solid', team: 'users-outline', 'text-asset': 'text-serif-outline', text: 'text-serif-outline', times: 'x-outline', tools: 'screwdriver-hammer-outline', 'trash-can-outline': 'trash-outline', 'trash-can': 'trash-solid', 'trend-down': 'arrow-right-down-outline', 'trend-up': 'arrow-right-up-outline', 'trend-neutral': 'arrow-right-outline', trends: 'fire-outline', 'triangle-black': 'triangle-outline', triangle: 'triangle-exclamation-outline', 'trophy-outline': 'trophy-outline', 'unfollow-outline': 'user-x-outline', unfollow: 'user-x-solid', unlink: 'link-slash-outline', unlock: 'unlock-outline', upload: 'arrow-up-from-bracket-outline', 'user-circle': 'user-sprout-outline', users: 'users-outline', 'video-camera-story': 'video-camera-story-outline', 'video-camera': 'video-camera-outline', vip: 'gem-outline', weight: 'weight-outline', 'window-maximize': 'window-modal-outline', 'window-minimize': 'window-minimize-outline', 'window-regular': 'browser-outline', 'window-restore': 'browser-restore-outline', x: 'x-outline', 'tripadvisor-circle-filled': 'tripadvisor-cicle-solid', 'tripadvisor-circle-empty': 'tripadvisor-circle-outline', 'flat-positive-sentiment': 'face-smile-outline', 'flat-negative-sentiment': 'face-frown-outline', 'flat-neutral-sentiment': 'face-neutral-outline'};
+
+// All the new icon names. Used to avoid attempting to migrate an icon name that has already been migrated.
+// prettier-ignore
+const ExternalIconNames = ["fb-reactions-angry","fb-reactions-haha","fb-reactions-like","fb-reactions-love","fb-reactions-sad","fb-reactions-wow","recommendation","reels-outline","reels-solid","tripadvisor-circle-outline","tripadvisor-circle-solid","verified","yelp-full-star","yelp-half-star"];
+// prettier-ignore
+const GeneralIconNames = ["alarm-clock-outline","alarm-clock-solid","all-caps-outline","all-caps-solid","alt-text-outline","alt-text-solid","arrow-down-outline","arrow-down-solid","arrow-down-to-bracket-outline","arrow-down-to-bracket-solid","arrow-down-to-line-outline","arrow-down-to-line-solid","arrow-left-outline","arrow-left-solid","arrow-left-to-line-outline","arrow-left-to-line-solid","arrow-right-down-outline","arrow-right-down-solid","arrow-right-from-bracket-outline","arrow-right-from-bracket-solid","arrow-right-outline","arrow-right-solid","arrow-right-to-line-outline","arrow-right-to-line-solid","arrow-right-up-outline","arrow-right-up-solid","arrow-up-from-bracket-outline","arrow-up-from-bracket-solid","arrow-up-outline","arrow-up-solid","arrow-up-to-line-outline","arrow-up-to-line-solid","arrows-left-right-outline","arrows-left-right-solid","arrows-pointing-in-outline","arrows-pointing-in-solid","arrows-pointing-out-outline","arrows-pointing-out-solid","arrows-rotate-outline","arrows-rotate-solid","arrows-up-down-left-right-outline","arrows-up-down-left-right-solid","art-palette-outline","art-palette-solid","atom-outline","atom-solid","audio-outline","audio-solid","ban-outline","ban-solid","barcode-outline","barcode-solid","bars-density-large-outline","bars-density-large-solid","bars-density-medium-outline","bars-density-medium-solid","bars-density-small-outline","bars-density-small-solid","bars-density-two-panel-outline","bars-density-two-panel-solid","basketball-outline","basketball-solid","bell-outline","bell-slash-outline","bell-slash-solid","bell-solid","bold-outline","bold-solid","book-open-outline","book-open-solid","book-outline","book-solid","bookmark-filter-outline","bookmark-filter-solid","bookmark-outline","bookmark-reply-outline","bookmark-reply-solid","bookmark-solid","briefcase-outline","briefcase-solid","browser-nav-bar-outline","browser-nav-bar-solid","browser-outline","browser-restore-outline","browser-restore-solid","browser-solid","bullseye-arrow-outline","bullseye-arrow-solid","calculator-outline","calculator-solid","calendar-clock-outline","calendar-clock-solid","calendar-day-outline","calendar-day-solid","calendar-outline","calendar-range-outline","calendar-range-solid","calendar-solid","camera-outline","camera-solid","camera-story-outline","camera-story-solid","camera-x-outline","camera-x-solid","caret-down-outline","caret-down-solid","caret-up-down-outline","caret-up-down-solid","caret-up-down-sort-down-outline","caret-up-down-sort-down-solid","caret-up-down-sort-up-outline","caret-up-down-sort-up-solid","caret-up-outline","caret-up-solid","carousel-outline","carousel-solid","cart-outline","cart-plus-outline","cart-plus-solid","cart-solid","chart-area-outline","chart-area-solid","chart-arrow-down-outline","chart-arrow-down-solid","chart-arrow-neutral-outline","chart-arrow-neutral-solid","chart-arrow-up-outline","chart-arrow-up-solid","chart-bar-outline","chart-bar-simple-outline","chart-bar-simple-solid","chart-bar-solid","chart-donut-outline","chart-donut-solid","chart-line-outline","chart-line-solid","chart-pie-outline","chart-pie-solid","check-outline","check-solid","chevron-down-outline","chevron-down-solid","chevron-left-outline","chevron-left-solid","chevron-right-outline","chevron-right-solid","chevron-up-outline","chevron-up-solid","circle-check-double-outline","circle-check-double-solid","circle-check-outline","circle-check-solid","circle-dollar-arrow-up-outline","circle-dollar-arrow-up-solid","circle-dollar-outline","circle-dollar-solid","circle-exclamation-outline","circle-exclamation-solid","circle-fill-outline","circle-fill-solid","circle-half-outline","circle-half-solid","circle-i-outline","circle-i-solid","circle-minus-outline","circle-minus-solid","circle-no-fill-outline","circle-no-fill-solid","circle-question-outline","circle-question-solid","circle-user-outline","circle-user-solid","circle-x-outline","circle-x-solid","clipboard-outline","clipboard-solid","clock-outline","clock-rotate-left-outline","clock-rotate-left-solid","clock-solid","closed-caption-outline","closed-caption-solid","cloud-outline","cloud-solid","code-outline","code-solid","columns-outline","columns-solid","comment-plus-outline","comment-plus-solid","comment-star-outline","comment-star-slash-outline","comment-star-slash-solid","comment-star-solid","compass-outline","compass-solid","credit-card-outline","credit-card-solid","crop-outline","crop-solid","crown-outline","crown-solid","curly-brackets-plus-outline","curly-brackets-plus-solid","delete-left-outline","delete-left-solid","diamond-outline","diamond-solid","diamond-vs-outline","diamond-vs-solid","dollar-outline","dollar-solid","ellipsis-horizontal-outline","ellipsis-horizontal-solid","ellipsis-vertical-outline","ellipsis-vertical-solid","envelope-outline","envelope-solid","expression-frown-outline","expression-frown-solid","expression-neutral-outline","expression-neutral-solid","expression-smile-open-outline","expression-smile-open-solid","eye-dropper-outline","eye-dropper-solid","eye-outline","eye-slash-outline","eye-slash-solid","eye-solid","face-frown-open-outline","face-frown-open-solid","face-frown-outline","face-frown-solid","face-neutral-outline","face-neutral-solid","face-smile-open-outline","face-smile-open-solid","face-smile-outline","face-smile-solid","file-box-arrow-up-outline","file-box-arrow-up-solid","file-box-outline","file-box-solid","filter-outline","filter-solid","fire-outline","fire-solid","flag-outline","flag-solid","folder-open-outline","folder-open-solid","folder-outline","folder-solid","font-case-outline","font-case-solid","four-squares-outline","four-squares-solid","gauge-outline","gauge-solid","gear-outline","gear-solid","gem-outline","gem-solid","gif-outline","gif-solid","glasses-outline","glasses-solid","globe-outline","globe-solid","grip-lines-vertical-outline","grip-lines-vertical-solid","h1-outline","h1-solid","h2-outline","h2-solid","h3-outline","h3-solid","h4-outline","h4-solid","hand-pointer-clicking-outline","hand-pointer-clicking-solid","handshake-outline","handshake-solid","hashtag-outline","hashtag-solid","headset-outline","headset-solid","heart-outline","heart-pulse-outline","heart-pulse-solid","heart-solid","horizontal-lines-outline","horizontal-lines-solid","hourglass-outline","hourglass-solid","house-outline","house-solid","image-outline","image-solid","images-outline","images-solid","inbox-arrow-up-outline","inbox-arrow-up-solid","inbox-check-outline","inbox-check-solid","inbox-lightning-bolt-outline","inbox-lightning-bolt-solid","inbox-outline","inbox-solid","inboxes-outline","inboxes-solid","italics-outline","italics-solid","justify-center-outline","justify-center-solid","justify-left-outline","justify-left-solid","justify-right-outline","justify-right-solid","key-outline","key-solid","keyboard-outline","keyboard-solid","language-outline","language-solid","laptop-mobile-outline","laptop-mobile-solid","larger-circle-small-circle-outline","larger-circle-small-circle-solid","lightbulb-outline","lightbulb-solid","lightning-bolt-outline","lightning-bolt-solid","link-broken-outline","link-broken-solid","link-outline","link-slash-outline","link-slash-solid","link-solid","locate-outline","locate-solid","location-pin-outline","location-pin-solid","lock-outline","lock-solid","magic-wand-outline","magic-wand-solid","magnifying-glass-outline","magnifying-glass-solid","magnifying-glass-twitter-outline","magnifying-glass-twitter-solid","masks-theater-outline","masks-theater-solid","megaphone-dollar-outline","megaphone-dollar-solid","megaphone-outline","megaphone-solid","metric-table-outline","metric-table-solid","microphone-outline","microphone-solid","minus-outline","minus-solid","mobile-outline","mobile-solid","mood-boards-outline","mood-boards-solid","moon-crescent-outline","moon-crescent-solid","newspaper-outline","newspaper-solid","note-outline","note-solid","office-building-outline","office-building-solid","ordered-list-outline","ordered-list-solid","paint-can-outline","paint-can-solid","paper-bars-outline","paper-bars-solid","paper-outline","paper-pencil-outline","paper-pencil-solid","paper-plane-arrows-rotate-outline","paper-plane-arrows-rotate-solid","paper-plane-outline","paper-plane-solid","paper-solid","paper-x-outline","paper-x-solid","paperclip-outline","paperclip-solid","papers-outline","papers-solid","pattern-circle-triangle-square-outline","pattern-circle-triangle-square-solid","pause-outline","pause-solid","pencil-outline","pencil-solid","person-hiking-outline","person-hiking-solid","phone-outline","phone-solid","play-outline","play-solid","plug-outline","plug-solid","plus-outline","plus-solid","pointer-outline","pointer-solid","profile-card-outline","profile-card-solid","pulse-outline","pulse-solid","puzzle-piece-outline","puzzle-piece-solid","qr-code-outline","qr-code-solid","question-mark-outline","question-mark-solid","rectangle-caption-outline","rectangle-caption-solid","reply-outline","reply-solid","repost-outline","repost-solid","robot-outline","robot-solid","route-outline","route-solid","rss-outline","rss-solid","screwdriver-hammer-outline","screwdriver-hammer-solid","seeds-outline","seeds-solid","shopping-bag-outline","shopping-bag-solid","sitemap-outline","sitemap-solid","sparkle-outline","sparkle-solid","square-check-outline","square-check-solid","square-outline","square-solid","squares-arrow-up-right-outline","squares-arrow-up-right-solid","stamp-check-outline","stamp-check-solid","stamp-outline","stamp-solid","star-full-outline","star-full-solid","star-half-outline","star-half-solid","star-of-life-outline","star-of-life-solid","star-outline","star-solid","story-outline","story-solid","strikethrough-outline","strikethrough-solid","sun-outline","sun-solid","symbol-at-outline","symbol-at-solid","symbol-mars-outline","symbol-mars-solid","symbol-venus-outline","symbol-venus-solid","tag-outline","tag-solid","tags-outline","tags-solid","text-serif-outline","text-serif-solid","thread-outline","thread-solid","thumbs-down-outline","thumbs-down-solid","thumbs-up-outline","thumbs-up-solid","thumbtack-check-outline","thumbtack-check-solid","thumbtack-outline","thumbtack-solid","ticket-outline","ticket-solid","trash-outline","trash-solid","triangle-exclamation-outline","triangle-exclamation-solid","triangle-outline","triangle-solid","trophy-outline","trophy-solid","underline-outline","underline-solid","unlock-outline","unlock-solid","unordered-list-outline","unordered-list-solid","user-arrow-up-outline","user-arrow-up-solid","user-check-outline","user-check-solid","user-minus-outline","user-minus-solid","user-outline","user-plus-outline","user-plus-solid","user-solid","user-x-outline","user-x-solid","users-outline","users-solid","video-camera-outline","video-camera-solid","video-camera-story-outline","video-camera-story-solid","weight-outline","weight-solid","wifi-outline","wifi-slash-outline","wifi-slash-solid","wifi-solid","window-arrow-up-left-outline","window-arrow-up-left-solid","window-dock-left-outline","window-dock-left-solid","window-dock-right-outline","window-dock-right-solid","window-full-outline","window-full-solid","window-minimize-outline","window-minimize-solid","window-modal-outline","window-modal-solid","x-outline","x-solid"]
+// prettier-ignore
+const SproutIconNames = ["advocacy-outline","advocacy-solid","asset-library-outline","asset-library-plus-outline","asset-library-plus-solid","asset-library-solid","bambu-outline","bambu-solid","comment-bookmark-outline","comment-bookmark-solid","comment-exclamation-outline","comment-exclamation-solid","comment-eye-outline","comment-eye-solid","comment-light-bulb-outline","comment-light-bulb-solid","comment-outline","comment-solid","comment-sparkle-outline","comment-sparkle-solid","comments-outline","comments-solid","leaf-minus-outline","leaf-minus-solid","leaf-plus-outline","leaf-plus-solid","listening-outline","listening-solid","pencil-to-square-outline","pencil-to-square-solid","queue-outline","queue-solid","sprout-leaf-ellipsis-outline","sprout-leaf-ellipsis-solid","sprout-leaf-lightning-bolt-outline","sprout-leaf-lightning-bolt-solid","sprout-leaf-sync-outline","sprout-leaf-sync-solid","square-round-arrow-up-right-outline","square-round-arrow-up-right-solid","user-sprout-outline","user-sprout-solid"];
+const newIconNames = [
+  ...ExternalIconNames,
+  ...GeneralIconNames,
+  ...SproutIconNames,
+];
+
+// Map the current icon name to the new icon name
+const mapIconName = (currentName) => {
+  if (IconMap[currentName]) {
+    return IconMap[currentName];
+  }
+  // Migrates icons using icon names that were deprecated in 2020
+  if (IconMap[deprecatedNames[currentName]]) {
+    return IconMap[deprecatedNames[currentName]];
+  }
+  // Checks if the icon name has already been migrated. Makes the codemod semi-idempotent.
+  if (
+    newIconNames.includes(currentName) ||
+    newIconNames.includes(`${currentName}-solid`) // All icons with a solid variant also have an outline variant, so we don't need to check both.
+  ) {
+    return currentName;
+  }
+  return '';
+};
+
+// Perform regex replacements with the raw file text
+function replaceIconNames(file, firstRegex, secondRegex) {
+  let source = file.source;
+  firstRegex?.forEach((result) => {
+    // Extract just the icon name from the regex result
+    const iconName = result.match(/['"]([^'"]+)['"]/g)[0].replace(/['"]/g, '');
+    const mappedIcon = mapIconName(iconName);
+    if (mappedIcon) {
+      const replacement = result.replace(iconName, mappedIcon);
+      source = source.replace(result, replacement);
+    }
+  });
+  secondRegex?.forEach((result) => {
+    // Extract just the icon name from the regex result
+    const iconName = result.replace('ssiconsvg-', '').replace(/['"]/g, '');
+    const mappedIcon = mapIconName(iconName);
+    if (mappedIcon) {
+      const replacement = result
+        .replace('ssiconsvg-', 'seeds-svgs_')
+        .replace(iconName, mappedIcon);
+      source = source.replace(result, replacement);
+    }
+  });
+  return source;
+}
+
+// Racine components that accept icon names as top-level props.
+// Users can pass in additional components in their codebase that accept icon names as props with "--components={componentName: [iconPropNames], ...}".
+// A non-top-level prop example is the "iconName" prop nested under TokenInput's "tokens" prop. We can't fix those automatically.
+const defaultComponents = {
+  Icon: ['name'],
+  'Icon.Toggle': ['activeName', 'inactiveName'],
+  Badge: ['iconName'],
+  TokenInput: ['iconName'],
+};
+
+// We need to concatenate a few properties to get subcomponent names from AST (e.g., Icon.Toggle).
+const getSubcomponentName = (element) => {
+  return `${element.value.name.object.name}.${element.value.name.property.name}`;
+};
+
+// Reformat the components option until it's the same format as defaultComponents above. It comes through like this:
+//   '0': 'Accordion:[icon]',
+//   '1': 'FacebookPMAux:[iconName',
+//   '2': 'secondaryIconName]',
+// Wrap each word in quotes and join it all together with commas, then wrap it in bracket and parse it from JSON.
+const optionToObject = (components) => {
+  const withQuotesAndCommas = components
+    .join(',')
+    // (\w|\.) = letters or periods. Handles component names with periods in them such as subcomponents.
+    .replace(/((\w|\.)+)/g, '"$1"');
+  try {
+    return JSON.parse('{' + withQuotesAndCommas + '}');
+  } catch (e) {
+    e.message = `
+    Failed to parse the components argument. Please verify that it is formatted correctly:
+    Format: --components="{ComponentName: ['nameProp']}"
+    - The argument should be an object wrapped in quotes
+    - Name props must be passed as an array because some components may have multiple relevant props.`;
+    throw e;
+  }
+};
+
+module.exports = function transformer(file, api, options) {
+  const quote = options?.quote ?? 'single';
+  const components = options?.components
+    ? {...defaultComponents, ...optionToObject(options.components)}
+    : defaultComponents;
+  const addComments = options?.addComments ?? true;
+  const shimComponentName = options?.shimName ?? '';
+  const shimComponentPath = options?.shimImportPath ?? '';
+  const addShimComponent = !!shimComponentName;
+
+  let source = file.source;
+
+  // Codemods run faster and cause fewer formatting issues if you only write files with modifications.
+  let hasModifications = false;
+
+  // Keep track of which components have usages that cannot be migrated and how many total usages per file cannot be migrated.
+  const unmigratedComponents = [];
+  let unmigratedCount = 0;
+
+  // Track how many components in the file were converted to the shim component.
+  let shimmedCount = 0;
+  // Count how many "Icon" components in particular are in the file so that we can determine if they were all shimmed.
+  // Other components can have their string icon names migrated, but only "Icon" can be shimmed.
+  let iconCount = 0;
+
+  // Regex: This code can migrate icon names outside of js files as well as some cases in js files that the codemod cannot identify.
+  // We do any regex-based replacements and then, if it's a js file, we parse the result to AST and look for any additional icon names to migrate.
+
+  // Regex 1: This regex looks for "icon" or "iconName" followed 0+ whitespace characters, a colon or equal sign,
+  // 0+ whitespace characters, then something wrapped in single or double quotes.
+  const firstRegex = file.source.match(
+    /(icon|iconName)\s*([:=])\s*(['"])([^'"]+)(['"])/g
+  );
+  // Regex 2: This regex looks for "ssiconsvg-" + any non-quote characters until the next quote.
+  // This appears in snap files and when manually rendering icons in non-React code like stache files.
+  const secondRegex = file.source.match(/(ssiconsvg-)([^'"]+)(['"])/g);
+
+  // If either regex found results, execute find+replace before parsing the file into AST.
+  if (firstRegex || secondRegex) {
+    const sourceWithReplacements = replaceIconNames(
+      file,
+      firstRegex,
+      secondRegex
+    );
+
+    // Only set hasModifications to true if the replacement step changed anything.
+    if (sourceWithReplacements !== file.source) {
+      hasModifications = true;
+      source = sourceWithReplacements;
+    }
+  }
+
+  // We want to short-circuit before parsing to AST for non-JS/TS files.
+  if (
+    // file.path is undefined during test runs only
+    file.path &&
+    !file.path.endsWith('js') &&
+    !file.path.endsWith('ts') &&
+    !file.path.endsWith('tsx')
+  ) {
+    return hasModifications ? source : null;
+  }
+
+  // Now the AST modifications happen.
+  const j = api.jscodeshift;
+  const ast = j(source);
+  const icons = ast.find(j.JSXOpeningElement).filter((element) => {
+    let componentName = element.value.name.name;
+    if (element.value.name?.type === 'JSXMemberExpression') {
+      componentName = getSubcomponentName(element);
+    }
+    if (componentName === 'Icon') {
+      iconCount += 1;
+    }
+    return components[componentName];
+  });
+
+  // Save comments at the top of the file if they exist. Otherwise, they may be deleted if we modify the first import.
+  const originalFirstNode = ast.find(j.Program).get('body', 0).node;
+  const originalFirstComments = originalFirstNode.comments;
+
+  icons.forEach((iconPath) => {
+    const attrs = j(iconPath).find(j.JSXAttribute);
+    const componentName =
+      iconPath.value.name.name ?? getSubcomponentName(iconPath);
+    const nameProps = components[componentName];
+    attrs.forEach((path) => {
+      const {node} = path;
+      // nameProps is an array because some components accept icon names for multiple props
+      // (e.g., Icon.Toggle's activeName and inactiveName props)
+      if (nameProps.includes(node.name.name)) {
+        const value = node.value.value;
+        if (value) {
+          // Map string icon names
+          const mappedValue = mapIconName(value);
+          if (mappedValue) {
+            node.value = j.literal(mappedValue);
+            hasModifications = true;
+          } else {
+            // This case handles invalid string icon names.
+            unmigratedCount += 1;
+            !unmigratedComponents.includes(componentName) &&
+              unmigratedComponents.push(componentName);
+          }
+        } else if (node.value.expression.type === 'ConditionalExpression') {
+          // Handle ternary statements (eg, `name={isActive ? 'like' : 'like-outline'}`)
+          const oldConsequent = node.value.expression.consequent?.value;
+          const oldAlternate = node.value.expression.alternate?.value;
+          const newConsequent = oldConsequent
+            ? mapIconName(oldConsequent)
+            : undefined;
+          const newAlternate = oldAlternate
+            ? mapIconName(oldAlternate)
+            : undefined;
+
+          if (newConsequent && newAlternate) {
+            hasModifications = true;
+            node.value.expression.consequent = j.literal(newConsequent);
+            node.value.expression.alternate = j.literal(newAlternate);
+          } else {
+            unmigratedCount += 1;
+            !unmigratedComponents.includes(componentName) &&
+              unmigratedComponents.push(componentName);
+          }
+        } else {
+          // This case handles when the nameProp value is a variable.
+          if (componentName === 'Icon' && addShimComponent) {
+            iconPath.node.name = shimComponentName;
+            shimmedCount += 1;
+            hasModifications = true;
+          } else {
+            unmigratedCount += 1;
+            !unmigratedComponents.includes(componentName) &&
+              unmigratedComponents.push(componentName);
+          }
+        }
+      }
+    });
+  });
+
+  if (addShimComponent && shimmedCount > 0) {
+    // Add the shim import after the racine import
+    ast
+      .find(j.ImportDeclaration, {
+        source: {value: '@sproutsocial/racine'},
+      })
+      .filter((element) => {
+        // There may be multiple Racine import statements. Only change the one that imports Icon.
+        return element.node.specifiers
+          .map((specifier) => specifier.imported.name)
+          .includes('Icon');
+      })
+      .insertAfter(
+        j.importDeclaration(
+          [j.importSpecifier(j.identifier(shimComponentName))],
+          j.literal(shimComponentPath)
+        )
+      );
+
+    // Checks for non-standard usages of the Icon component: styled(Icon) and typeof Icon
+    // We don't want to delete the import if Icon is used in this way in the file.
+    const hasOtherIconUsages =
+      source.match(/\(Icon\)/) || source.match(/typeof Icon/);
+
+    // If we migrated every Icon in the file to the shim component, remove the Icon import.
+    if (shimmedCount === iconCount && !hasOtherIconUsages) {
+      ast
+        .find(j.ImportDeclaration, {
+          source: {value: '@sproutsocial/racine'},
+        })
+        .replaceWith((path) => {
+          // Remove "Icon" from the imported items
+          const importedItems = path.node.specifiers.filter(
+            (specifier) => specifier.imported.name !== 'Icon'
+          );
+
+          // If Icon was the only item being imported from Racine, delete the import statement.
+          if (!importedItems.length) {
+            return null;
+          }
+
+          return j.importDeclaration(
+            importedItems,
+            j.literal(path.node.source.value)
+          );
+        });
+    }
+
+    hasModifications = true;
+  }
+
+  // If the first node has been modified or deleted, reattach the comments to the new first node.
+  const newFirstNode = ast.find(j.Program).get('body', 0).node;
+  if (newFirstNode !== originalFirstNode) {
+    newFirstNode.comments = originalFirstComments;
+  }
+
+  if (addComments && unmigratedCount > 0) {
+    const comment = j.commentBlock(
+      `TODO (icon-library codemod): Please manually migrate icon names passed to ${unmigratedCount} component(s) in this file.
+   Look for usages of these components: ${unmigratedComponents.join(', ')}`
+    );
+    // Add this comment after any comments on the first node.
+    newFirstNode.comments = newFirstNode.comments
+      ? [...newFirstNode.comments, comment]
+      : [comment];
+    hasModifications = true;
+  }
+
+  return hasModifications ? ast.toSource({quote}) : null;
+};

package/codemods/icon-name-substitution.js

@@ -0,0 +1,43 @@
+// We need the deprecated icon name mapping so that we can migrate icons still using the ancient names all the way to the new names.
+// prettier-ignore
+const deprecatedNames = {backtotop: 'back-to-top', 'circle-check-filled': 'circle-check', 'circle-check-no-fill': 'circle-check', 'circle-check-inverse-outline': 'circle-check-outline', 'circle-check-inverse': 'circle-check-outline', 'circle+-filled': 'circle+', 'circlex-filled': 'circlex', 'circle+-nofill': 'circle+', 'circlex-nofill': 'circlex', creditcard: 'credit-card', 'direct-message': 'messages', 'facebook-nofill': 'facebook', googleanalytics: 'google-analytics-color', 'instagram-brand-keyword': 'hashtag', 'help-white': 'help', 'info-white': 'info', 'instagram-nofill': 'instagram', 'key-circle': 'key', 'key-square': 'key', 'linkedin-nofill': 'linkedin', 'listening-home': 'listening', 'location-pub': 'location', 'location-pub-outline': 'location-outline', 'publishing-calendar': 'calendar', qrcode: 'qr-code', 'sparkles-solid': 'sparkles', 'star-inverse': 'star-outline', 'triangle-white': 'triangle', 'triangle-nofill': 'triangle', 'tripadvisor-circle-filled': 'tripadvisor-circle', 'tripadvisor-circle-empty': 'tripadvisor-circle-outline', 'tumblr-square': 'tumblr', 'tumblr-nofill': 'tumblr', 'twitter-business-mention': 'search', 'verified-nofill': 'verified', 'window-maximize-solid': 'window-maximize'};
+
+// Mapping from old icon names to new icon names
+// prettier-ignore
+const IconMap = {'active-listener': 'listening-outline', 'add-item': 'plus-outline', 'add-keyword': 'plus-outline', 'add-team-member': 'user-plus-outline', 'add-variable': 'curly-brackets-plus-outline', 'address-card-outline': 'profile-card-outline', 'address-card-solid': 'profile-card-solid', ads: 'dollar-outline', 'advocacy-outline': 'advocacy-outline', advocacy: 'advocacy-solid', 'approval-indicator-outline': 'stamp-outline', 'approval-indicator': 'stamp-solid', archive: 'file-box-outline', 'arrow-down-line': 'arrow-down-to-line-outline', 'arrow-down': 'arrow-down-outline', 'arrow-left-line': 'arrow-left-to-line-outline', 'arrow-left': 'arrow-left-outline', 'arrow-right-line': 'arrow-right-to-line-outline', 'arrow-right': 'arrow-right-outline', 'arrow-up-line': 'arrow-up-to-line-outline', 'arrow-up': 'arrow-up-outline', arrows: 'arrows-up-down-left-right-outline', 'asset-library-outline': 'asset-library-outline', 'asset-library': 'asset-library-solid', assign: 'sitemap-outline', atom: 'atom-outline', audio: 'audio-outline', 'back-to-top': 'arrow-up-outline', 'bambu-icon-outline': 'bambu-outline', 'bambu-icon': 'bambu-solid', barcode: 'barcode-outline', basketball: 'basketball-outline', 'bell-outline': 'bell-outline', bold: 'bold-outline', book: 'book-outline', 'bookmark-filled': 'bookmark-solid', bookmark: 'bookmark-outline', bot: 'robot-outline', browser: 'window-full-outline', 'bulk-select': 'square-check-outline', business: 'briefcase-outline', 'calendar-outline': 'calendar-outline', calendar: 'calendar-solid', 'camera-outline': 'camera-outline', 'camera-story': 'camera-story-solid', camera: 'camera-solid', campaign: 'megaphone-outline', carousel: 'carousel-outline', 'cart-plus': 'cart-plus-outline', check: 'check-outline', 'chevron-down-filled': 'caret-down-outline', 'chevron-down': 'chevron-down-outline', 'chevron-left': 'chevron-left-outline', 'chevron-right': 'chevron-right-outline', 'chevron-up-down-filled': 'caret-up-down-outline', 'chevron-up-filled': 'caret-up-outline', 'chevron-up': 'chevron-up-outline', 'circle-check-outline': 'circle-check-outline', 'circle-check': 'circle-check-solid', circle: 'circle-no-fill-outline', 'circle+': 'plus-outline', circles: 'large-circle-small-circle-outline', circleX: 'circle-x-outline', circlex: 'circle-x-outline', 'click-to-view': 'hand-pointer-clicking-outline', clicks: 'pointer-outline', 'clipboard-outline': 'clipboard-outline', clipboard: 'clipboard-solid', clock: 'clock-outline', 'closed-captioning': 'closed-caption-outline', cloud: 'cloud-outline', code: 'code-outline', columns: 'columns-outline', 'comment-alt-outline': 'comments-outline', 'comment-alt': 'comment-solid', 'comment-lines-alt-outline': 'comment-outline', comment: 'comments-outline', 'compact-density': 'bars-density-small-outline', 'compact-indicator': 'bars-density-small-outline', comparison: 'diamond-vs-outline', competitor: 'office-building-outline', compose: 'pencil-to-square-outline', 'content-suggestions': 'comment-sparkle-outline', 'credit-card': 'credit-card-outline', crop: 'crop-outline', crown: 'crown-outline', dashboard: 'gauge-outline', 'deconstructed-negative-sentiment': 'expression-frown-outline', 'deconstructed-neutral-sentiment': 'expression-neutral-outline', 'deconstructed-positive-sentiment': 'expression-smile-open-outline', discovery: 'compass-outline', 'dislike-outline': 'thumbs-down-outline', dislike: 'thumbs-down-solid', 'dm-link-outline': 'comment-plus-outline', 'dm-link': 'comment-plus-solid', 'doesnt-recommend': 'comment-star-slash-outline', dotdotdot: 'ellipsis-horizontal-outline', download: 'arrow-down-to-bracket-outline', 'drafts-outline': 'paper-outline', drafts: 'paper-solid', 'duplicate-outline': 'papers-outline', duplicate: 'papers-solid', 'emoji-outline': 'face-smile-outline', emoji: 'face-smile-solid', 'empty-image': 'camera-x-outline', 'engagement-per-post': 'comment-outline', engagements: 'comments-outline', error: 'circle-exclamation-outline', 'exchange-alt': 'arrows-left-right-outline', 'expanded-indicator': 'bars-density-large-outline', export: 'square-round-arrow-up-right-outline', 'extended-circles': 'large-circle-small-circle-outline', 'external-link-alt': 'squares-arrow-up-right-outline', 'external-link': 'square-round-arrow-up-right-outline', 'extreme-negative-sentiment': 'face-frown-open-outline', 'eye-outline': 'eye-outline', 'eye-slash-outline': 'eye-slash-outline', 'eye-slash': 'eye-slash-solid', eye: 'eye-solid', 'facebook-branded-content-outline': 'handshake-outline', 'facebook-branded-content': 'handshake-solid', feeds: 'unordered-list-outline', female: 'symbol-venus-outline', 'file-chart-line': 'paper-bars-outline', 'file-edit': 'paper-pencil-outline', 'file-times-solid': 'paper-x-outline', filter: 'filter-outline', 'flag-outline': 'flag-outline', flag: 'flag-solid', 'folder-open': 'folder-open-outline', folder: 'folder-outline', 'follow-outline': 'user-plus-outline', follow: 'user-plus-solid', 'follower-increase': 'user-arrow-up-outline', following: 'user-check-outline', font: 'font-case-outline', 'full-access': 'circle-fill-outline', gear: 'gear-outline', gears: 'gear-outline', glasses: 'glasses-outline', globe: 'globe-outline', grip: 'grip-lines-vertical-outline', h1: 'h1-outline', h2: 'h2-outline', h3: 'h3-outline', h4: 'h3-outline', hamburger: 'horizontal-lines-outline', hashtag: 'hashtag-outline', headset: 'headset-outline', 'heart-outline': 'heart-outline', heart: 'heart-solid', heartbeat: 'heart-pulse-outline', 'help-alt': 'question-mark-outline', help: 'circle-question-outline', hiking: 'person-hiking-outline', history: 'clock-rotate-left-outline', home: 'house-outline', hourglass: 'hourglass-outline', 'image-caption': 'rectangle-caption-outline', image: 'image-outline', images: 'images-outline', 'impressions-per-post': 'comment-eye-outline', impressions: 'eye-outline', 'inactive-listener': 'file-box-outline', 'inbox-action': 'inbox-check-outline', 'inbox-views': 'inboxes-outline', inbox: 'inbox-outline', indicator: 'circle-fill-outline', industry: 'office-building-outline', info: 'circle-i-outline', 'internal-activity-outline': 'clock-rotate-left-outline', 'internal-activity': 'clock-rotate-left-solid', italic: 'italics-outline', key: 'key-outline', keyboard: 'keyboard-outline', 'laptop-phone': 'laptop-mobile-outline', 'large-density': 'bars-density-large-outline', lift: 'circle-dollar-arrow-up-outline', 'like-outline': 'thumbs-up-outline', like: 'thumbs-up-solid', link: 'link-outline', 'list-ol': 'ordered-list-outline', listening: 'listening-outline', lists: 'unordered-list-outline', 'location-outline': 'location-pin-outline', location: 'location-pin-solid', lock: 'lock-outline', 'magic-wand': 'magic-wand-outline', male: 'symbol-mars-outline', mention: 'symbol-at-outline', 'message-preview-outline': 'eye-outline', 'message-preview': 'eye-solid', message: 'comment-outline', 'messages-outline': 'envelope-outline', messages: 'envelope-solid', 'metric-table': 'metric-table-outline', minus: 'minus-outline', mobile: 'mobile-outline', monitor: 'pulse-outline', moon: 'moon-crescent-outline', 'negative-sentiment': 'face-frown-outline', 'neutral-positive-sentiment': 'face-smile-outline', 'neutral-sentiment': 'face-neutral-outline', 'new-trend': 'fire-outline', newspaper: 'newspaper-outline', 'no-access': 'circle-minus-outline', 'no-notifications-filled': 'bell-slash-solid', 'no-notifications': 'bell-slash-outline', notepad: 'clipboard-outline', 'notifications-publishing': 'alarm-clock-outline', notifications: 'bell-outline', offline: 'wifi-slash-outline', online: 'wifi-outline', 'paid-promotion-outline': 'circle-dollar-outline', 'paid-promotion': 'circle-dollar-solid', paid: 'calculator-outline', paint: 'paint-can-outline', palette: 'art-palette-outline', paperclip: 'paperclip-outline', pause: 'pause-outline', 'pencil-outline': 'pencil-outline', pencil: 'pencil-solid', person: 'user-outline', phone: 'phone-outline', 'pinterest-boards-outline': 'mood-boards-outline', 'pinterest-boards': 'mood-boards-solid', 'play-circle': 'play-outline', play: 'play-outline', plug: 'plug-outline', plus: 'plus-outline', 'positive-sentiment': 'face-smile-open-outline', 'power-up-outline': 'lightning-bolt-outline', 'power-up': 'lightning-bolt-solid', 'profile-connect': 'leaf-plus-outline', 'profile-disconnect': 'leaf-minus-outline', 'publishing-outline': 'paper-plane-outline', publishing: 'paper-plane-outline', 'puzzle-piece': 'puzzle-piece-outline', 'qr-code': 'qr-code-outline', queue: 'queue-outline', recommendation: 'comment-star-outline', referrals: 'star-full-outline', refresh: 'arrows-rotate-outline', rejected: 'ban-outline', 'reply-outline': 'reply-outline', reply: 'reply-solid', 'reporting-period': 'calendar-range-outline', reporting: 'chart-bar-simple-outline', 'reports-home': 'four-squares-outline', reports: 'chart-pie-outline', retweet: 'repost-outline', rss: 'rss-outline', sales: 'dollar-outline', 'save-assets': 'asset-library-plus-outline', 'saved-messages': 'comment-bookmark-outline', 'saved-reply-outline': 'bookmark-reply-outline', 'saved-reply': 'bookmark-reply-solid', search: 'magnifying-glass-outline', 'sent-message-outline': 'inbox-arrow-up-outline', 'sent-message': 'inbox-arrow-up-solid', share: 'square-round-arrow-up-right-outline', 'shopping-bag-outline': 'shopping-bag-outline', 'shopping-bag': 'shopping-bag-solid', 'show-navigation': 'browser-nav-bar-outline', 'small-density': 'bars-density-medium-outline', smiley: 'face-smile-outline', 'some-access': 'circle-half-outline', sparkles: 'sparkle-outline', 'spike-alert': 'comment-exclamation-outline', 'star-half-alt-solid': 'star-half-outline', 'star-of-life': 'star-of-life-outline', 'star-outline': 'star-outline', star: 'star-full-outline', 'sticky-note-outline': 'note-outline', 'sticky-note': 'note-solid', story: 'camera-story-outline', stories: 'story-outline', suggestions: 'comment-light-bulb-outline', sun: 'sun-outline', 'tag-outline': 'tag-outline', tag: 'tag-solid', 'targeting-outline': 'bullseye-arrow-outline', targeting: 'bullseye-arrow-solid', 'tasks-outline': 'thumbtack-outline', tasks: 'thumbtack-solid', 'team-conversation-outline': 'sprout-leaf-lightning-bolt-outline', 'team-conversation': 'sprout-leaf-lightning-bolt-solid', team: 'users-outline', 'text-asset': 'text-serif-outline', text: 'text-serif-outline', times: 'x-outline', tools: 'screwdriver-hammer-outline', 'trash-can-outline': 'trash-outline', 'trash-can': 'trash-solid', 'trend-down': 'arrow-right-down-outline', 'trend-up': 'arrow-right-up-outline', 'trend-neutral': 'arrow-right-outline', trends: 'fire-outline', 'triangle-black': 'triangle-outline', triangle: 'triangle-exclamation-outline', 'trophy-outline': 'trophy-outline', 'unfollow-outline': 'user-x-outline', unfollow: 'user-x-solid', unlink: 'link-slash-outline', unlock: 'unlock-outline', upload: 'arrow-up-from-bracket-outline', 'user-circle': 'user-sprout-outline', users: 'users-outline', 'video-camera-story': 'video-camera-story-outline', 'video-camera': 'video-camera-outline', vip: 'gem-outline', weight: 'weight-outline', 'window-maximize': 'window-modal-outline', 'window-minimize': 'window-minimize-outline', 'window-regular': 'browser-outline', 'window-restore': 'browser-restore-outline', x: 'x-outline', 'tripadvisor-circle-filled': 'tripadvisor-cicle-solid', 'tripadvisor-circle-empty': 'tripadvisor-circle-outline', 'flat-positive-sentiment': 'face-smile-outline', 'flat-negative-sentiment': 'face-frown-outline', 'flat-neutral-sentiment': 'face-neutral-outline'};
+
+// Map the current icon name to the new icon name
+const mapIconName = (currentName) => {
+  if (IconMap[currentName]) {
+    return IconMap[currentName];
+  }
+  // Migrates icons using icon names that were deprecated in 2020
+  if (IconMap[deprecatedNames[currentName]]) {
+    return IconMap[deprecatedNames[currentName]];
+  }
+  return '';
+};
+
+module.exports = function transformer(file, api, options) {
+  const quote = options?.quote ?? 'single';
+  const j = api.jscodeshift;
+  const ast = j(file.source);
+  let hasModifications = false;
+
+  // Because we do not filter down the literals we find in any way to confirm they are icon-related,
+  // we may end up inadvertently mapping non-icon-name usages of strings that happen to be icon names.
+  // Thus, it is *extremely important* to manually check the results of this codemod!
+  // Otherwise, non-icon-related bugs may be introduced.
+  ast.find(j.Literal).forEach((path) => {
+    const value = path.value.value;
+    if (value) {
+      const mappedValue = mapIconName(value);
+      if (mappedValue) {
+        path.value.value = mappedValue;
+        hasModifications = true;
+      }
+    }
+  });
+
+  return hasModifications ? ast.toSource({quote}) : null;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sproutsocial/racine",
-  "version": "13.3.0",
+  "version": "13.4.0",
   "license": "MIT",
   "files": [
     "__flow__",
@@ -150,7 +150,7 @@
     "jest": "27.x.x",
     "jest-axe": "6.0.0",
     "jest-styled-components": "7.0.0-beta.1",
-    "jscodeshift": "^0.14.0",
+    "jscodeshift": "^0.13.0",
     "json-to-scss": "^1.6.2",
     "lint-staged": "^13.0.3",
     "moment": "^2.29.4",