|
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 :)"` |
|
); |
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 offind
. It is specific to some versions of BSDfind
(such as macOS) and is not compatible with the GNUfind
version commonly found on Linux systems.