Skip to content

Instantly share code, notes, and snippets.

@christiangenco

christiangenco/migrateHeroicons.js

Forked from PicchiKevin/migrate.sh
Last active March 27, 2025 08:05
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save christiangenco/470a99f4823ee81f2b22bad83119f599 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save christiangenco/470a99f4823ee81f2b22bad83119f599 to your computer and use it in GitHub Desktop.
Download ZIP
Heroicons v1 to v2
Raw
readme.md

Heroicons v1 to v2 migration script

The goal of this script is to simply replce all the old heroicons icon name by the new one. (v1 -> v2) The script is probably the less efficient piece of code I ever wrote but it does the job. Thanks to @steveoh & @ryanburns23 for creating the initial list of changes in tailwindlabs/heroicons#750

The migrate.sh is generated by the few lines bellow. If you're running on MacOS you don't have to make any changes but if you're running it on Linux you might have to replace sed -i '' -e by sed -i. The script will avoid replacing strings in hidden folders (such as .git) but also node_modules/ anf the migrate.js file.

const heroiconsV1toV2 = {
  AdjustmentsVerticalIcon: 'AdjustmentsVerticalIcon',
  ChatBubbleBottomCenterTextIcon: 'ChatBubbleBottomCenterTextIcon',
  ArchiveBoxIcon: 'ArchiveBoxIcon',
  ArrowDownCircleIcon: 'ArrowDownCircleIcon',
  ArrowLeftCircleIcon: 'ArrowLeftCircleIcon',
  ArrowRightCircleIcon: 'ArrowRightCircleIcon',
  ArrowUpCircleIcon: 'ArrowUpCircleIcon',
  ArrowLongDownIcon: 'ArrowLongDownIcon',
  ArrowLongLeftIcon: 'ArrowLongLeftIcon',
  ArrowLongRightIcon: 'ArrowLongRightIcon',
  ArrowLongUpIcon: 'ArrowLongUpIcon',
  ArrowsPointingOutIcon: 'ArrowsPointingOutIcon',
  CheckBadgeIcon: 'CheckBadgeIcon',
  NoSymbolIcon: 'NoSymbolIcon',
  BookmarkSquareIcon: 'BookmarkSquareIcon',
  BanknotesIcon: 'BanknotesIcon',
  ChartBarSquareIcon: 'ChartBarSquareIcon',
  ChatBubbleLeftRightIcon: 'ChatBubbleLeftRightIcon',
  ChatBubbleLeftEllipsisIcon: 'ChatBubbleLeftEllipsisIcon',
  ChatBubbleOvalLeftEllipsisIcon: 'ChatBubbleOvalLeftEllipsisIcon',
  CpuChipIcon: 'CpuCpuChipIcon',
  ClipboardDocumentCheckIcon: 'ClipboardDocumentCheckIcon',
  ClipboardDocumentIcon: 'ClipboardDocumentIcon',
  ClipboardDocumentListIcon: 'ClipboardDocumentListIcon',
  CloudArrowDownIcon: 'CloudArrowDownIcon',
  CloudArrowUpIcon: 'CloudArrowUpIcon',
  CodeBracketIcon: 'CodeBracketIcon',
  RectangleStackIcon: 'RectangleStackIcon',
  SwatchIcon: 'SwatchIcon',
  CursorArrowRaysIcon: 'CursorArrowRaysIcon',
  CircleStackIcon: 'CircleStackIcon',
  ComputerDesktopIcon: 'ComputerDesktopIcon',
  DevicePhoneMobileIcon: 'DevicePhoneMobileIcon',
  DocumentPlusIcon: 'DocumentPlusIcon',
  DocumentArrowDownIcon: 'DocumentArrowDownIcon',
  DocumentMinusIcon: 'DocumentMinusIcon',
  DocumentChartBarIcon: 'DocumentChartBarIcon',
  DocumentMagnifyingGlassIcon: 'DocumentMagnifyingGlassIcon',
  EllipsisHorizontalCircleIcon: 'EllipsisHorizontalCircleIcon',
  EllipsisHorizontalIcon: 'EllipsisHorizontalIcon',
  EllipsisVerticalIcon: 'EllipsisVerticalIcon',
  ArrowDownTrayIcon: 'ArrowDownTrayIcon',
  Square2StackIcon: 'Square2StackIcon',
  FaceSmileIcon: 'FaceSmileIcon',
  FaceFrownIcon: 'FaceFrownIcon',
  ExclamationIcon: 'ExclamationIcon',
  ArrowTopRightOnSquareIcon: 'ArrowTopRightOnSquareIcon',
  EyeSlashIcon: 'EyeSlashIcon',
  ForwardIcon: 'ForwardIcon',
  FunnelIcon: 'FunnelIcon',
  FolderPlusIcon: 'FolderPlusIcon',
  FolderArrowDownTrayIcon: 'FolderArrowDownIcon',
  FolderMinusIcon: 'FolderMinusIcon',
  GlobeEuropeAfricaIcon: 'GlobeEuropeAfricaIcon',
  HandRaisedIcon: 'HandRaisedIcon',
  InboxArrowDownIcon: 'InboxArrowDownIcon',
  BuildingLibraryIcon: 'BuildingBuildingLibraryIcon',
  BoltIcon: 'BoltIcon',
  MapPinIcon: 'MapPinIcon',
  ArrowLeftOnRectangleIcon: 'ArrowLeftOnRectangleIcon',
  ArrowRightOnRectangleIcon: 'ArrowRightOnRectangleIcon',
  EnvelopeOpenIcon: 'EnvelopeOpenIcon',
  EnvelopeIcon: 'EnvelopeIcon',
  Bars3CenterLeftIcon: 'Bars3CenterLeftIcon',
  Bars3BottomLeftIcon: 'Bars3BottomLeftIcon',
  Bars3BottomRightIcon: 'Bars3BottomRightIcon',
  Bars2Icon: 'Bars2Icon',
  Bars3Icon: 'Bars3Icon',
  MusicalNoteIcon: 'MusicalNoteIcon',
  BuildingOfficeIcon: 'BuildingOfficeIcon',
  PencilSquareIcon: 'PencilSquareIcon',
  PhoneArrowDownLeftIcon: 'PhoneArrowDownLeftIcon',
  PhoneXMarkIcon: 'PhoneXMarkIcon',
  PhoneArrowUpRightIcon: 'PhoneArrowUpRightIcon',
  PhotoIcon: 'PhotoIcon',
  PuzzlePieceIcon: 'PuzzlePieceIcon',
  QrCodeIcon: 'QrCodeBracketIcon',
  ReceiptPercentIcon: 'ReceiptPercentIcon',
  ArrowPathIcon: 'ArrowPathIcon',
  ArrowUturnLeftIcon: 'ArrowUturnLeftIcon',
  BackwardIcon: 'BackwardIcon',
  ArrowDownOnSquareStackIcon: 'ArrowDownOnSquareStackIcon',
  ArrowDownOnSquareIcon: 'ArrowDownOnSquareIcon',
  MagnifyingGlassCircleIcon: 'MagnifyingGlassCircleIcon',
  MagnifyingGlassIcon: 'MagnifyingGlassIcon',
  MegaphoneIcon: 'MegaphoneIcon',
  SignalSlashIcon: 'SignalSlashIcon',
  SignalIcon: 'SignalIcon',
  LifebuoyIcon: 'LifebuoyIcon',
  ArrowRightLeftIcon: 'ArrowRightLeftIcon',
  ArrowUpDownIcon: 'ArrowUpDownIcon',
  TableCellsIcon: 'TableCellsIcon',
  RectangleGroupIcon: 'RectangleGroupIcon',
  CommandLineIcon: 'CommandLineIcon',
  HandThumbDownIcon: 'HandHandThumbDownIcon',
  HandThumbUpIcon: 'HandHandThumbUpIcon',
  LanguageIcon: 'LanguageIcon',
  ArrowTrendingDownIcon: 'ArrowArrowTrendingDownIcon',
  ArrowTrendingUpIcon: 'ArrowArrowTrendingUpIcon',
  ArrowUpTrayIcon: 'ArrowUpTrayIcon',
  UserPlusIcon: 'UserPlusIcon',
  ViewColumnsIcon: 'ViewColumnsIcon',
  SquaresPlusIcon: 'SquaresPlusIcon',
  Squares2x2Icon: 'Squares2x2Icon',
  Bars4Icon: 'Bars4Icon',
  SpeakerXMarkIcon: 'SpeakerXMarkIcon',
  SpeakerWaveIcon: 'SpeakerWaveIcon',
  XMarkIcon: 'XMarkIcon',
  MagnifyingGlassPlusIcon: 'MagnifyingGlassPlusIcon',
  MagnifyingGlassMinusIcon: 'MagnifyingGlassMinusIcon',
};

Object.entries(heroiconsV1toV2).map(element => {
  const [a, b] = element;
  console.log(`find . -type f -not -path '*/\.*' -path '*.js' -not -path './node_modules*' -not -path 'migrate.js' -exec sed -i '' -e 's/${a}/${b}/g' {} +`)
});

Happy with the script? Come say hi on Twitter @KevinPicchi

Raw
migrate.sh
find . -type f -not -path '*/.*' -path '*.js' -not -path './node_modules*' -not -path 'migrate.js' -exec sed -i '' -e 's/ColorSwatchIcon/SwatchIcon/g' {} +
find . -type f -not -path '*/.*' -path '*.js' -not -path './node_modules*' -not -path 'migrate.js' -exec sed -i '' -e 's/CursorClickIcon/CursorArrowRaysIcon/g' {} +
find . -type f -not -path '*/.*' -path '*.js' -not -path './node_modules*' -not -path 'migrate.js' -exec sed -i '' -e 's/DatabaseIcon/CircleStackIcon/g' {} +
find . -type f -not -path '*/.*' -path '*.js' -not -path './node_modules*' -not -path 'migrate.js' -exec sed -i '' -e 's/DesktopComputerIcon/ComputerDesktopIcon/g' {} +
find . -type f -not -path '*/.*' -path '*.js' -not -path './node_modules*' -not -path 'migrate.js' -exec sed -i '' -e 's/DeviceMobileIcon/DevicePhoneMobileIcon/g' {} +
find . -type f -not -path '*/.*' -path '*.js' -not -path './node_modules*' -not -path 'migrate.js' -exec sed -i '' -e 's/DocumentAddIcon/DocumentPlusIcon/g' {} +
find . -type f -not -path '*/.*' -path '*.js' -not -path './node_modules*' -not -path 'migrate.js' -exec sed -i '' -e 's/DocumentDownloadIcon/DocumentArrowDownIcon/g' {} +
find . -type f -not -path '*/.*' -path '*.js' -not -path './node_modules*' -not -path 'migrate.js' -exec sed -i '' -e 's/DocumentRemoveIcon/DocumentMinusIcon/g' {} +
find . -type f -not -path '*/.*' -path '*.js' -not -path './node_modules*' -not -path 'migrate.js' -exec sed -i '' -e 's/DocumentReportIcon/DocumentChartBarIcon/g' {} +
find . -type f -not -path '*/.*' -path '*.js' -not -path './node_modules*' -not -path 'migrate.js' -exec sed -i '' -e 's/DocumentSearchIcon/DocumentMagnifyingGlassIcon/g' {} +
find . -type f -not -path '*/.*' -path '*.js' -not -path './node_modules*' -not -path 'migrate.js' -exec sed -i '' -e 's/DotsCircleHorizontalIcon/EllipsisHorizontalCircleIcon/g' {} +
find . -type f -not -path '*/.*' -path '*.js' -not -path './node_modules*' -not -path 'migrate.js' -exec sed -i '' -e 's/DotsHorizontalIcon/EllipsisHorizontalIcon/g' {} +
find . -type f -not -path '*/.*' -path '*.js' -not -path './node_modules*' -not -path 'migrate.js' -exec sed -i '' -e 's/DotsVerticalIcon/EllipsisVerticalIcon/g' {} +
find . -type f -not -path '*/.*' -path '*.js' -not -path './node_modules*' -not -path 'migrate.js' -exec sed -i '' -e 's/DownloadIcon/ArrowDownTrayIcon/g' {} +
find . -type f -not -path '*/.*' -path '*.js' -not -path './node_modules*' -not -path 'migrate.js' -exec sed -i '' -e 's/DuplicateIcon/Square2StackIcon/g' {} +
find . -type f -not -path '*/.*' -path '*.js' -not -path './node_modules*' -not -path 'migrate.js' -exec sed -i '' -e 's/EmojiHappyIcon/FaceSmileIcon/g' {} +
find . -type f -not -path '*/.*' -path '*.js' -not -path './node_modules*' -not -path 'migrate.js' -exec sed -i '' -e 's/EmojiSadIcon/FaceFrownIcon/g' {} +
find . -type f -not -path '*/.*' -path '*.js' -not -path './node_modules*' -not -path 'migrate.js' -exec sed -i '' -e 's/ExclamationIcon/ExclamationIcon/g' {} +
find . -type f -not -path '*/.*' -path '*.js' -not -path './node_modules*' -not -path 'migrate.js' -exec sed -i '' -e 's/ExternalLinkIcon/ArrowTopRightOnSquareIcon/g' {} +
find . -type f -not -path '*/.*' -path '*.js' -not -path './node_modules*' -not -path 'migrate.js' -exec sed -i '' -e 's/EyeOffIcon/EyeSlashIcon/g' {} +
find . -type f -not -path '*/.*' -path '*.js' -not -path './node_modules*' -not -path 'migrate.js' -exec sed -i '' -e 's/FastForwardIcon/ForwardIcon/g' {} +
find . -type f -not -path '*/.*' -path '*.js' -not -path './node_modules*' -not -path 'migrate.js' -exec sed -i '' -e 's/FilterIcon/FunnelIcon/g' {} +
find . -type f -not -path '*/.*' -path '*.js' -not -path './node_modules*' -not -path 'migrate.js' -exec sed -i '' -e 's/FolderAddIcon/FolderPlusIcon/g' {} +
find . -type f -not -path '*/.*' -path '*.js' -not -path './node_modules*' -not -path 'migrate.js' -exec sed -i '' -e 's/FolderDownloadIcon/FolderArrowDownIcon/g' {} +
find . -type f -not -path '*/.*' -path '*.js' -not -path './node_modules*' -not -path 'migrate.js' -exec sed -i '' -e 's/FolderRemoveIcon/FolderMinusIcon/g' {} +
find . -type f -not -path '*/.*' -path '*.js' -not -path './node_modules*' -not -path 'migrate.js' -exec sed -i '' -e 's/GlobeIcon/GlobeEuropeAfricaIcon/g' {} +
find . -type f -not -path '*/.*' -path '*.js' -not -path './node_modules*' -not -path 'migrate.js' -exec sed -i '' -e 's/HandIcon/HandRaisedIcon/g' {} +
find . -type f -not -path '*/.*' -path '*.js' -not -path './node_modules*' -not -path 'migrate.js' -exec sed -i '' -e 's/InboxInIcon/InboxArrowDownIcon/g' {} +
find . -type f -not -path '*/.*' -path '*.js' -not -path './node_modules*' -not -path 'migrate.js' -exec sed -i '' -e 's/LibraryIcon/BuildingLibraryIcon/g' {} +
find . -type f -not -path '*/.*' -path '*.js' -not -path './node_modules*' -not -path 'migrate.js' -exec sed -i '' -e 's/LightningBoltIcon/BoltIcon/g' {} +
find . -type f -not -path '*/.*' -path '*.js' -not -path './node_modules*' -not -path 'migrate.js' -exec sed -i '' -e 's/LocationMarkerIcon/MapPinIcon/g' {} +
find . -type f -not -path '*/.*' -path '*.js' -not -path './node_modules*' -not -path 'migrate.js' -exec sed -i '' -e 's/LoginIcon/ArrowLeftOnRectangleIcon/g' {} +
find . -type f -not -path '*/.*' -path '*.js' -not -path './node_modules*' -not -path 'migrate.js' -exec sed -i '' -e 's/LogoutIcon/ArrowRightOnRectangleIcon/g' {} +
find . -type f -not -path '*/.*' -path '*.js' -not -path './node_modules*' -not -path 'migrate.js' -exec sed -i '' -e 's/MailOpenIcon/EnvelopeOpenIcon/g' {} +
find . -type f -not -path '*/.*' -path '*.js' -not -path './node_modules*' -not -path 'migrate.js' -exec sed -i '' -e 's/MailIcon/EnvelopeIcon/g' {} +
find . -type f -not -path '*/.*' -path '*.js' -not -path './node_modules*' -not -path 'migrate.js' -exec sed -i '' -e 's/MenuAlt1Icon/Bars3CenterLeftIcon/g' {} +
find . -type f -not -path '*/.*' -path '*.js' -not -path './node_modules*' -not -path 'migrate.js' -exec sed -i '' -e 's/MenuAlt2Icon/Bars3BottomLeftIcon/g' {} +
find . -type f -not -path '*/.*' -path '*.js' -not -path './node_modules*' -not -path 'migrate.js' -exec sed -i '' -e 's/MenuAlt3Icon/Bars3BottomRightIcon/g' {} +
find . -type f -not -path '*/.*' -path '*.js' -not -path './node_modules*' -not -path 'migrate.js' -exec sed -i '' -e 's/MenuAlt4Icon/Bars2Icon/g' {} +
find . -type f -not -path '*/.*' -path '*.js' -not -path './node_modules*' -not -path 'migrate.js' -exec sed -i '' -e 's/MenuIcon/Bars3Icon/g' {} +
find . -type f -not -path '*/.*' -path '*.js' -not -path './node_modules*' -not -path 'migrate.js' -exec sed -i '' -e 's/MusicNoteIcon/MusicalNoteIcon/g' {} +
find . -type f -not -path '*/.*' -path '*.js' -not -path './node_modules*' -not -path 'migrate.js' -exec sed -i '' -e 's/OfficeBuildingIcon/BuildingOfficeIcon/g' {} +
find . -type f -not -path '*/.*' -path '*.js' -not -path './node_modules*' -not -path 'migrate.js' -exec sed -i '' -e 's/PencilAltIcon/PencilSquareIcon/g' {} +
find . -type f -not -path '*/.*' -path '*.js' -not -path './node_modules*' -not -path 'migrate.js' -exec sed -i '' -e 's/PhoneIncomingIcon/PhoneArrowDownLeftIcon/g' {} +
find . -type f -not -path '*/.*' -path '*.js' -not -path './node_modules*' -not -path 'migrate.js' -exec sed -i '' -e 's/PhoneMissedCallIcon/PhoneXMarkIcon/g' {} +
find . -type f -not -path '*/.*' -path '*.js' -not -path './node_modules*' -not -path 'migrate.js' -exec sed -i '' -e 's/PhoneOutgoingIcon/PhoneArrowUpRightIcon/g' {} +
find . -type f -not -path '*/.*' -path '*.js' -not -path './node_modules*' -not -path 'migrate.js' -exec sed -i '' -e 's/PhotographIcon/PhotoIcon/g' {} +
find . -type f -not -path '*/.*' -path '*.js' -not -path './node_modules*' -not -path 'migrate.js' -exec sed -i '' -e 's/PuzzleIcon/PuzzlePieceIcon/g' {} +
find . -type f -not -path '*/.*' -path '*.js' -not -path './node_modules*' -not -path 'migrate.js' -exec sed -i '' -e 's/QrcodeIcon/QrCodeIcon/g' {} +
find . -type f -not -path '*/.*' -path '*.js' -not -path './node_modules*' -not -path 'migrate.js' -exec sed -i '' -e 's/ReceiptTaxIcon/ReceiptPercentIcon/g' {} +
find . -type f -not -path '*/.*' -path '*.js' -not -path './node_modules*' -not -path 'migrate.js' -exec sed -i '' -e 's/RefreshIcon/ArrowPathIcon/g' {} +
find . -type f -not -path '*/.*' -path '*.js' -not -path './node_modules*' -not -path 'migrate.js' -exec sed -i '' -e 's/ReplyIcon/ArrowUturnLeftIcon/g' {} +
find . -type f -not -path '*/.*' -path '*.js' -not -path './node_modules*' -not -path 'migrate.js' -exec sed -i '' -e 's/RewindIcon/BackwardIcon/g' {} +
find . -type f -not -path '*/.*' -path '*.js' -not -path './node_modules*' -not -path 'migrate.js' -exec sed -i '' -e 's/SaveAsIcon/ArrowDownOnSquareStackIcon/g' {} +
find . -type f -not -path '*/.*' -path '*.js' -not -path './node_modules*' -not -path 'migrate.js' -exec sed -i '' -e 's/SaveIcon/ArrowDownOnSquareIcon/g' {} +
find . -type f -not -path '*/.*' -path '*.js' -not -path './node_modules*' -not -path 'migrate.js' -exec sed -i '' -e 's/SearchCircleIcon/MagnifyingGlassCircleIcon/g' {} +
find . -type f -not -path '*/.*' -path '*.js' -not -path './node_modules*' -not -path 'migrate.js' -exec sed -i '' -e 's/SearchIcon/MagnifyingGlassIcon/g' {} +
find . -type f -not -path '*/.*' -path '*.js' -not -path './node_modules*' -not -path 'migrate.js' -exec sed -i '' -e 's/SpeakerphoneIcon/MegaphoneIcon/g' {} +
find . -type f -not -path '*/.*' -path '*.js' -not -path './node_modules*' -not -path 'migrate.js' -exec sed -i '' -e 's/StatusOfflineIcon/SignalSlashIcon/g' {} +
find . -type f -not -path '*/.*' -path '*.js' -not -path './node_modules*' -not -path 'migrate.js' -exec sed -i '' -e 's/StatusOnlineIcon/SignalIcon/g' {} +
find . -type f -not -path '*/.*' -path '*.js' -not -path './node_modules*' -not -path 'migrate.js' -exec sed -i '' -e 's/SupportIcon/LifebuoyIcon/g' {} +
find . -type f -not -path '*/.*' -path '*.js' -not -path './node_modules*' -not -path 'migrate.js' -exec sed -i '' -e 's/SwitchHorizontalIcon/ArrowRightLeftIcon/g' {} +
find . -type f -not -path '*/.*' -path '*.js' -not -path './node_modules*' -not -path 'migrate.js' -exec sed -i '' -e 's/SwitchVerticalIcon/ArrowUpDownIcon/g' {} +
find . -type f -not -path '*/.*' -path '*.js' -not -path './node_modules*' -not -path 'migrate.js' -exec sed -i '' -e 's/TableIcon/TableCellsIcon/g' {} +
find . -type f -not -path '*/.*' -path '*.js' -not -path './node_modules*' -not -path 'migrate.js' -exec sed -i '' -e 's/TemplateIcon/RectangleGroupIcon/g' {} +
find . -type f -not -path '*/.*' -path '*.js' -not -path './node_modules*' -not -path 'migrate.js' -exec sed -i '' -e 's/TerminalIcon/CommandLineIcon/g' {} +
find . -type f -not -path '*/.*' -path '*.js' -not -path './node_modules*' -not -path 'migrate.js' -exec sed -i '' -e 's/ThumbDownIcon/HandThumbDownIcon/g' {} +
find . -type f -not -path '*/.*' -path '*.js' -not -path './node_modules*' -not -path 'migrate.js' -exec sed -i '' -e 's/ThumbUpIcon/HandThumbUpIcon/g' {} +
find . -type f -not -path '*/.*' -path '*.js' -not -path './node_modules*' -not -path 'migrate.js' -exec sed -i '' -e 's/TranslateIcon/LanguageIcon/g' {} +
find . -type f -not -path '*/.*' -path '*.js' -not -path './node_modules*' -not -path 'migrate.js' -exec sed -i '' -e 's/TrendingDownIcon/ArrowTrendingDownIcon/g' {} +
find . -type f -not -path '*/.*' -path '*.js' -not -path './node_modules*' -not -path 'migrate.js' -exec sed -i '' -e 's/TrendingUpIcon/ArrowTrendingUpIcon/g' {} +
find . -type f -not -path '*/.*' -path '*.js' -not -path './node_modules*' -not -path 'migrate.js' -exec sed -i '' -e 's/UploadIcon/ArrowUpTrayIcon/g' {} +
find . -type f -not -path '*/.*' -path '*.js' -not -path './node_modules*' -not -path 'migrate.js' -exec sed -i '' -e 's/UserAddIcon/UserPlusIcon/g' {} +
find . -type f -not -path '*/.*' -path '*.js' -not -path './node_modules*' -not -path 'migrate.js' -exec sed -i '' -e 's/ViewBoardsIcon/ViewColumnsIcon/g' {} +
find . -type f -not -path '*/.*' -path '*.js' -not -path './node_modules*' -not -path 'migrate.js' -exec sed -i '' -e 's/ViewGridAddIcon/SquaresPlusIcon/g' {} +
find . -type f -not -path '*/.*' -path '*.js' -not -path './node_modules*' -not -path 'migrate.js' -exec sed -i '' -e 's/ViewGridIcon/Squares2x2Icon/g' {} +
find . -type f -not -path '*/.*' -path '*.js' -not -path './node_modules*' -not -path 'migrate.js' -exec sed -i '' -e 's/ViewListIcon/Bars4Icon/g' {} +
find . -type f -not -path '*/.*' -path '*.js' -not -path './node_modules*' -not -path 'migrate.js' -exec sed -i '' -e 's/VolumeOffIcon/SpeakerXMarkIcon/g' {} +
find . -type f -not -path '*/.*' -path '*.js' -not -path './node_modules*' -not -path 'migrate.js' -exec sed -i '' -e 's/VolumeUpIcon/SpeakerWaveIcon/g' {} +
find . -type f -not -path '*/.*' -path '*.js' -not -path './node_modules*' -not -path 'migrate.js' -exec sed -i '' -e 's/XIcon/XMarkIcon/g' {} +
find . -type f -not -path '*/.*' -path '*.js' -not -path './node_modules*' -not -path 'migrate.js' -exec sed -i '' -e 's/ZoomInIcon/MagnifyingGlassPlusIcon/g' {} +
find . -type f -not -path '*/.*' -path '*.js' -not -path './node_modules*' -not -path 'migrate.js' -exec sed -i '' -e 's/ZoomOutIcon/MagnifyingGlassMinusIcon/g' {} +
@ebisbe
Copy link

ebisbe commented Nov 17, 2022 •
edited
Loading

For vue I had to swap on line 43 -path '*.js' to -path '*.vue'.
Edit: gsub('@heroicons/${framework}/outline', '@heroicons/${framework}/20/outline'); should be gsub('@heroicons/${framework}/outline', '@heroicons/${framework}/24/outline');

@christiangenco
Copy link
Author

christiangenco commented Nov 18, 2022

@ebisbe Updated! Thanks.

@oleksandr-shubin
Copy link

oleksandr-shubin commented Nov 21, 2022

Had to input node processor into the pipeline on linux:

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

@ebisbe
Copy link

ebisbe commented Nov 22, 2022 •
edited
Loading

@oleksandr-shubin I had too but just downloaded the file and executed it locally as I was not sure to achieve the same result

@christiangenco
Copy link
Author

christiangenco commented Nov 22, 2022

@oleksandr-shubin Oh oops—that should be there for every OS. Fixed! Thanks.

@jemikanegara
Copy link

jemikanegara commented Nov 30, 2022

I think the script will be better if it could automatically target jsx, ts & tsx too

@himynameisubik
Copy link

himynameisubik commented Jan 18, 2023

#165 should be a upper case X and not lower case
ViewGridIcon: "Squares2X2Icon",

Else, handy little script. Thanks a lot!

@christiangenco
Copy link
Author

christiangenco commented Jan 24, 2023

@jemikanegara Updated to automatically target jsx, ts, and tsx too!

@himynameisubik Good catch. Fixed!

@amerritt14
Copy link

amerritt14 commented Jun 8, 2023 •
edited
Loading

This is amazing!
One thing I noticed is that V2 has a CogIcon but it looks significantly different from V1.
If you want to match the same SVG as V1, You would need to map CogIcon: "Cog8ToothIcon"

Thanks so much!

@imam2nd
Copy link

imam2nd commented Oct 24, 2023

Amazing! Thank you so much for your efforts. I really appreciate it.

@clarkmu
Copy link

clarkmu commented Mar 10, 2024

Nice execution. Thanks

@NicoDMTX
Copy link

NicoDMTX commented Mar 29, 2024 •
edited
Loading

Hello, you could add to your script at line 33

else if (fs.existsSync("pnpm-lock.yaml")) {
  console.error("Detected pnpm. Updating heroicons package to latest...");
  console.log(`pnpm install @heroicons/${framework}@latest`);

I use pnpm in my app and had to change this to make it works

@mreduar
Copy link

mreduar commented May 15, 2024

Because heroicons does not have enough icons to cover all the needs of the project, we found the need to install other icon packs that are compatible with tailwind and at the same time very similar to how heroicons is used. Even many of those other package names match in name with heroicons. This script updates everything that matches the names that were updated. Running it also updated other names of other icon packs I have and broke most of the application. It is recommended to use it only if you don't have any other package that may have name conflicts with heroicons.

Besides that, I had to modify the script slightly to be supported on my machine, this is a mac script, on linux it doesn't work because the -E option is not supported on all versions of find. It is specific to some versions of BSD find (such as macOS) and is not compatible with the GNU find version commonly found on Linux systems.

@GoodPie
Copy link

GoodPie commented Mar 26, 2025

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"`
    );
}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment