Heroicons v1 to v2

readme.md

Heroicons v1 to v2 migration script

This script:

1. Upgrades your heroicons library to the latest version (detecting if you're using heroicons/react or heroicons/vue and yarn or npm)
2. Upgrades your import statements (from @heroicons/${framework}/{solid|outline} to @heroicons/${framework}/20/{solid|outline})
3. Upgrades your icon names

Thanks to @steveoh & @ryanburns23 for creating the initial list of changes in tailwindlabs/heroicons#750 and to @PicchiKevin for the initial version of this script.

---

Run

curl https://gist.githubusercontent.com/christiangenco/470a99f4823ee81f2b22bad83119f599/raw/migrateHeroicons.js | node | bash

It definitely works on macOS and should work on linux too. If not you might have to play with the syntax of sed (maybe by replacing sed -i '' -e with sed -i in the gsub function?).

The script will avoid replacing strings in hidden folders and the node_modules folder.

Happy with this script? Come say hi on Twitter @KevinPicchi / @cgenco

migrateHeroicons.js

const fs = require("fs");

if (!fs.existsSync("package.json")) {
  console.error(
    "Cannot find package.json. Please run this script in your project directory."
  );
  process.exit(1);
}

const package = fs.readFileSync("package.json", "utf8");

let framework = null;

if (package.includes("heroicons/react")) {
  console.error("Detected heroicons/react...");
  framework = "react";
} else if (package.includes("heroicons/vue")) {
  console.error("Detected heroicons/vue...");
  framework = "vue";
} else {
  console.error(
    "It doesn't look like you have either the heroicons/react or heroicons/vue libraries installed in this project."
  );
  process.exit(1);
}

if (fs.existsSync("yarn.lock")) {
  console.error("Detected yarn. Updating heroicons package to latest...");
  console.log(`yarn add @heroicons/${framework}@latest`);
} else if (fs.existsSync("package-lock.json")) {
  console.error("Detected npm. Updating heroicons package to latest...");
  console.log(`npm install @heroicons/${framework}@latest`);
} else {
  console.error(
    "Error: cannot find evidence of yarn or npm. Please run either 'npm install' or 'yarn install' before using this script."
  );
  process.exit(1);
}

function gsub(from, to) {
  console.log(`echo "${from} => ${to}"`);
  console.log(
    `find -E . -type f -regex '.*\.(js|jsx|ts|tsx|vue)' -not -path '*/\.*' -not -path '*/node_modules/*' -not -path 'migrateHeroicons.js' -exec sed -i '' -e 's|${from}|${to}|g' {} +`
  );
}

console.log(`echo "Upgrading import statements..."`);
gsub(`@heroicons/${framework}/solid`, `@heroicons/${framework}/20/solid`);
gsub(`@heroicons/${framework}/outline`, `@heroicons/${framework}/24/outline`);

const heroiconsV1toV2 = {
  AdjustmentsIcon: "AdjustmentsVerticalIcon",
  AnnotationIcon: "ChatBubbleBottomCenterTextIcon",
  ArchiveIcon: "ArchiveBoxIcon",
  ArrowCircleDownIcon: "ArrowDownCircleIcon",
  ArrowCircleLeftIcon: "ArrowLeftCircleIcon",
  ArrowCircleRightIcon: "ArrowRightCircleIcon",
  ArrowCircleUpIcon: "ArrowUpCircleIcon",
  ArrowNarrowDownIcon: "ArrowLongDownIcon",
  ArrowNarrowLeftIcon: "ArrowLongLeftIcon",
  ArrowNarrowRightIcon: "ArrowLongRightIcon",
  ArrowNarrowUpIcon: "ArrowLongUpIcon",
  ArrowsExpandIcon: "ArrowsPointingOutIcon",
  ArrowSmDownIcon: "ArrowSmallDownIcon",
  ArrowSmLeftIcon: "ArrowSmallLeftIcon",
  ArrowSmRightIcon: "ArrowSmallRightIcon",
  ArrowSmUpIcon: "ArrowSmallUpIcon",
  BadgeCheckIcon: "CheckBadgeIcon",
  BanIcon: "NoSymbolIcon",
  BookmarkAltIcon: "BookmarkSquareIcon",
  CashIcon: "BanknotesIcon",
  ChartSquareBarIcon: "ChartBarSquareIcon",
  ChatAlt2Icon: "ChatBubbleLeftRightIcon",
  ChatAltIcon: "ChatBubbleLeftEllipsisIcon",
  ChatIcon: "ChatBubbleOvalLeftEllipsisIcon",
  ChipIcon: "CpuChipIcon",
  ClipboardCheckIcon: "ClipboardDocumentCheckIcon",
  ClipboardCopyIcon: "ClipboardDocumentIcon",
  ClipboardListIcon: "ClipboardDocumentListIcon",
  CloudDownloadIcon: "CloudArrowDownIcon",
  CloudUploadIcon: "CloudArrowUpIcon",
  CodeIcon: "CodeBracketIcon",
  CollectionIcon: "RectangleStackIcon",
  ColorSwatchIcon: "SwatchIcon",
  CursorClickIcon: "CursorArrowRaysIcon",
  DatabaseIcon: "CircleStackIcon",
  DesktopComputerIcon: "ComputerDesktopIcon",
  DeviceMobileIcon: "DevicePhoneMobileIcon",
  DocumentAddIcon: "DocumentPlusIcon",
  DocumentDownloadIcon: "DocumentArrowDownIcon",
  DocumentRemoveIcon: "DocumentMinusIcon",
  DocumentReportIcon: "DocumentChartBarIcon",
  DocumentSearchIcon: "DocumentMagnifyingGlassIcon",
  DotsCircleHorizontalIcon: "EllipsisHorizontalCircleIcon",
  DotsHorizontalIcon: "EllipsisHorizontalIcon",
  DotsVerticalIcon: "EllipsisVerticalIcon",
  DownloadIcon: "ArrowDownTrayIcon",
  DuplicateIcon: "Square2StackIcon",
  EmojiHappyIcon: "FaceSmileIcon",
  EmojiSadIcon: "FaceFrownIcon",
  ExclamationIcon: "ExclamationTriangleIcon",
  ExternalLinkIcon: "ArrowTopRightOnSquareIcon",
  EyeOffIcon: "EyeSlashIcon",
  FastForwardIcon: "ForwardIcon",
  FilterIcon: "FunnelIcon",
  FolderAddIcon: "FolderPlusIcon",
  FolderDownloadIcon: "FolderArrowDownIcon",
  FolderRemoveIcon: "FolderMinusIcon",
  GlobeIcon: "GlobeAmericasIcon",
  HandIcon: "HandRaisedIcon",
  InboxInIcon: "InboxArrowDownIcon",
  LibraryIcon: "BuildingLibraryIcon",
  LightningBoltIcon: "BoltIcon",
  LocationMarkerIcon: "MapPinIcon",
  LoginIcon: "ArrowLeftOnRectangleIcon",
  LogoutIcon: "ArrowRightOnRectangleIcon",
  MailIcon: "EnvelopeIcon",
  MailOpenIcon: "EnvelopeOpenIcon",
  MenuAlt1Icon: "Bars3CenterLeftIcon",
  MenuAlt2Icon: "Bars3BottomLeftIcon",
  MenuAlt3Icon: "Bars3BottomRightIcon",
  MenuAlt4Icon: "Bars2Icon",
  MenuIcon: "Bars3Icon",
  MinusSmIcon: "MinusSmallIcon",
  MusicNoteIcon: "MusicalNoteIcon",
  OfficeBuildingIcon: "BuildingOfficeIcon",
  PencilAltIcon: "PencilSquareIcon",
  PhoneIncomingIcon: "PhoneArrowDownLeftIcon",
  PhoneMissedCallIcon: "PhoneXMarkIcon",
  PhoneOutgoingIcon: "PhoneArrowUpRightIcon",
  PhotographIcon: "PhotoIcon",
  PlusSmIcon: "PlusSmallIcon",
  PuzzleIcon: "PuzzlePieceIcon",
  QrcodeIcon: "QrCodeIcon",
  ReceiptTaxIcon: "ReceiptPercentIcon",
  RefreshIcon: "ArrowPathIcon",
  ReplyIcon: "ArrowUturnLeftIcon",
  RewindIcon: "BackwardIcon",
  SaveAsIcon: "ArrowDownOnSquareStackIcon",
  SaveIcon: "ArrowDownOnSquareIcon",
  SearchCircleIcon: "MagnifyingGlassCircleIcon",
  SearchIcon: "MagnifyingGlassIcon",
  SelectorIcon: "ChevronUpDownIcon",
  SortAscendingIcon: "BarsArrowUpIcon",
  SortDescendingIcon: "BarsArrowDownIcon",
  SpeakerphoneIcon: "MegaphoneIcon",
  StatusOfflineIcon: "SignalSlashIcon",
  StatusOnlineIcon: "SignalIcon",
  SupportIcon: "LifebuoyIcon",
  SwitchHorizontalIcon: "ArrowsRightLeftIcon",
  SwitchVerticalIcon: "ArrowsUpDownIcon",
  TableIcon: "TableCellsIcon",
  TemplateIcon: "RectangleGroupIcon",
  TerminalIcon: "CommandLineIcon",
  ThumbDownIcon: "HandThumbDownIcon",
  ThumbUpIcon: "HandThumbUpIcon",
  TranslateIcon: "LanguageIcon",
  TrendingDownIcon: "ArrowTrendingDownIcon",
  TrendingUpIcon: "ArrowTrendingUpIcon",
  UploadIcon: "ArrowUpTrayIcon",
  UserAddIcon: "UserPlusIcon",
  UserRemoveIcon: "UserMinusIcon",
  ViewBoardsIcon: "ViewColumnsIcon",
  ViewGridAddIcon: "SquaresPlusIcon",
  ViewGridIcon: "Squares2X2Icon",
  ViewListIcon: "Bars4Icon",
  VolumeOffIcon: "SpeakerXMarkIcon",
  VolumeUpIcon: "SpeakerWaveIcon",
  XIcon: "XMarkIcon",
  ZoomInIcon: "MagnifyingGlassPlusIcon",
  ZoomOutIcon: "MagnifyingGlassMinusIcon",
};

console.log(`echo "Upgrading icon names..."`);
Object.entries(heroiconsV1toV2).map(([from, to]) => {
  gsub(from, to);
});

console.log(
  `echo "Done. You can thank https://twitter.com/cgenco and https://twitter.com/KevinPicchi for saving you so much time :)"`
);

Just reviving an old project, and came across hero icons being outdated. This script is really nice. The only thing I had to change was the gsub method.

Just had issues with the find path and sed picking up illegal characters. Hacky way but hopefully someone finds it useful.

function gsub(from, to) {
    console.log(`echo "${from} => ${to}"`);
    console.log(
        `LC_ALL=C find . -type f -name "*.js" -o -name "*.jsx" -o -name "*.ts" -o -name "*.tsx" -o -name "*.vue" | grep -v "node_modules" | grep -v "/\\." | grep -v "migrateHeroicons.js" | xargs sed -i '' "s|${from}|${to}|g"`
    );
}