Create table of icon name changes for v2 release #750
Comments
|
Table or v1 keywords for searching could be useful - I happened to be working on icons on our application, when the release hit. Suddenly I could search icons that I couldn't use in our application and therefore updated the package, leading to a lot of naming changes. It doesn't even have to be a table, if you could add the old icon keywords to the search, e.g. searching for wireless shows the wifi icon currently, adding the v1 icon names to the list of searchable, but hidden keywords, could be super useful. Maybe also a top banner or something that mentions that v2 has been released with a link to changelogs/naming convention changes. |
|
We use Heroicons in Spina CMS and I'd love to update our icons to the new set. I'm thinking about creating such a lookup table manually. Edit: {
"adjustments" => "adjustments-vertical",
"annotation" => "chat-bubble-bottom-center-text",
"archive" => "archive-box",
"arrow-circle-down" => "arrow-down-circle",
"arrow-circle-left" => "arrow-left-circle",
"arrow-circle-right" => "arrow-right-circle",
"arrow-circle-up" => "arrow-up-circle",
"arrow-narrow-down" => "arrow-long-down",
"arrow-narrow-left" => "arrow-long-left",
"arrow-narrow-right" => "arrow-long-right",
"arrow-narrow-up" => "arrow-long-up",
"arrow-sm-left" => nil,
"arrow-sm-right" => nil,
"arrow-sm-up" => nil,
"arrow-sm-down" => nil,
"arrows-expand" => "arrows-pointing-out",
"badge-check" => "check-badge",
"ban" => "no-symbol",
"bookmark-alt" => "bookmark-square",
"cash" => "banknotes",
"chart-square-bar" => "chart-bar-square",
"chat-alt-2" => "chat-bubble-left-right",
"chat-alt" => "chat-bubble-left-ellipsis",
"chat" => "chat-bubble-oval-left-ellipsis",
"chip" => "cpu-chip",
"clipboard-check" => "clipboard-document-check",
"clipboard-copy" => "clipboard-document",
"clipboard-list" => "clipboard-document-list",
"cloud-download" => "cloud-arrow-down",
"cloud-upload" => "cloud-arrow-up",
"code" => "code-bracket",
"collection" => "rectangle-stack",
"color-swatch" => "swatch",
"cube-transparent" => nil,
"currency-bangladeshi" => nil,
"cursor-click" => "cursor-arrow-rays",
"database" => "circle-stack",
"desktop-computer" => "computer-desktop",
"device-mobile" => "device-phone-mobile",
"document-add" => "document-plus",
"document-download" => "document-arrow-down",
"document-remove" => "document-minus",
"document-report" => "document-chart-bar",
"document-search" => "document-magnifying-glass",
"dots-circle-horizontal" => "ellipsis-horizontal-circle",
"dots-horizontal" => "ellipsis-horizontal",
"dots-vertical" => "ellipsis-vertical",
"download" => "arrow-down-tray",
"duplicate" => "square-2-stack",
"emoji-happy" => "face-smile",
"emoji-sad" => "face-frown",
"exclamation" => "exclamation",
"external-link" => "arrow-top-right-on-square",
"eye-off" => "eye-slash",
"fast-forward" => "forward",
"filter" => "funnel",
"folder-add" => "folder-plus",
"folder-download" => "folder-arrow-down",
"folder-remove" => "folder-minus",
"globe" => "globe-europe-africa",
"hand" => "hand-raised",
"inbox-in" => "inbox-arrow-down",
"library" => "building-library",
"lightning-bolt" => "bolt",
"location-marker" => "map-pin",
"login" => "arrow-left-on-rectangle",
"logout" => "arrow-right-on-rectangle",
"mail-open" => "envelope-open",
"mail" => "envelope",
"menu-alt-1" => "bars-3-center-left",
"menu-alt-2" => "bars-3-bottom-left",
"menu-alt-3" => "bars-3-bottom-right",
"menu-alt-4" => "bars-2",
"menu" => "bars-3",
"minus-sm" => nil,
"music-note" => "musical-note",
"office-building" => "building-office",
"pencil-alt" => "pencil-square",
"phone-incoming" => "phone-arrow-down-left",
"phone-missed-call" => "phone-x-mark",
"phone-outgoing" => "phone-arrow-up-right",
"photograph" => "photo",
"plus-sm" => nil,
"puzzle" => "puzzle-piece",
"qrcode" => "qr-code",
"receipt-tax" => "receipt-percent",
"refresh" => "arrow-path",
"reply" => "arrow-uturn-left",
"rewind" => "backward",
"rss" => nil,
"save-as" => "arrow-down-on-square-stack",
"save" => "arrow-down-on-square",
"search-circle" => "magnifying-glass-circle",
"search" => "magnifying-glass",
"selector" => nil,
"sort-ascending" => nil,
"sort-descending" => nil,
"speakerphone" => "megaphone",
"status-offline" => "signal-slash",
"status-online" => "signal",
"support" => "lifebuoy",
"switch-horizontal" => "arrow-right-left",
"switch-vertical" => "arrow-up-down",
"table" => "table-cells",
"template" => "rectangle-group",
"terminal" => "command-line",
"thumb-down" => "hand-thumb-down",
"thumb-up" => "hand-thumb-up",
"translate" => "language",
"trending-down" => "arrow-trending-down",
"trending-up" => "arrow-trending-up",
"upload" => "arrow-up-tray",
"user-add" => "user-plus",
"user-remove" => nil,
"variable" => nil,
"view-boards" => "view-columns",
"view-grid-add" => "squares-plus",
"view-grid" => "squares-2x2",
"view-list" => "bars-4",
"volume-off" => "speaker-x-mark",
"volume-up" => "speaker-wave",
"x" => "x-mark",
"zoom-in" => "magnifying-glass-plus",
"zoom-out" => "magnifying-glass-minus"
} |
|
@Bramjetten Thank you for doing this |
I agree, this is a good idea 💯 |
|
Thank you @steveoh & @Bramjetten for the initial list. 🤙 I needed it in JS with a bit different structure. Dropping that here in case it helps anyone: const heroiconsV1toV2 = {
AdjustmentsIcon: 'AdjustmentsVerticalIcon',
AnnotationIcon: 'ChatBubbleBottomCenterTextIcon',
ArchiveIcon: 'ArchiveBoxIcon',
ArrowCircleDownIcon: 'ArrowDownCircleIcon',
ArrowCircleLeftIcon: 'ArrowLeftCircleIcon',
ArrowCircleRightIcon: 'ArrowRightCircleIcon',
ArrowCircleUpIcon: 'ArrowUpCircleIcon',
ArrowNarrowDownIcon: 'ArrowLongDownIcon',
ArrowNarrowLeftIcon: 'ArrowLongLeftIcon',
ArrowNarrowRightIcon: 'ArrowLongRightIcon',
ArrowNarrowUpIcon: 'ArrowLongUpIcon',
ArrowSmLeftIcon: null,
ArrowSmRightIcon: null,
ArrowSmUpIcon: null,
ArrowSmDownIcon: null,
ArrowsExpandIcon: 'ArrowsPointingOutIcon',
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',
CubeTransparentIcon: null,
CurrencyBangladeshiIcon: null,
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: 'ExclamationIcon',
ExternalLinkIcon: 'ArrowTopRightOnSquareIcon',
EyeOffIcon: 'EyeSlashIcon',
FastForwardIcon: 'ForwardIcon',
FilterIcon: 'FunnelIcon',
FolderAddIcon: 'FolderPlusIcon',
FolderDownloadIcon: 'FolderArrowDownIcon',
FolderRemoveIcon: 'FolderMinusIcon',
GlobeIcon: 'GlobeEuropeAfricaIcon',
HandIcon: 'HandRaisedIcon',
InboxInIcon: 'InboxArrowDownIcon',
LibraryIcon: 'BuildingLibraryIcon',
LightningBoltIcon: 'BoltIcon',
LocationMarkerIcon: 'MapPinIcon',
LoginIcon: 'ArrowLeftOnRectangleIcon',
LogoutIcon: 'ArrowRightOnRectangleIcon',
MailOpenIcon: 'EnvelopeOpenIcon',
MailIcon: 'EnvelopeIcon',
MenuAlt1Icon: 'Bars3CenterLeftIcon',
MenuAlt2Icon: 'Bars3BottomLeftIcon',
MenuAlt3Icon: 'Bars3BottomRightIcon',
MenuAlt4Icon: 'Bars2Icon',
MenuIcon: 'Bars3Icon',
MinusSmIcon: null,
MusicNoteIcon: 'MusicalNoteIcon',
OfficeBuildingIcon: 'BuildingOfficeIcon',
PencilAltIcon: 'PencilSquareIcon',
PhoneIncomingIcon: 'PhoneArrowDownLeftIcon',
PhoneMissedCallIcon: 'PhoneXMarkIcon',
PhoneOutgoingIcon: 'PhoneArrowUpRightIcon',
PhotographIcon: 'PhotoIcon',
PlusSmIcon: null,
PuzzleIcon: 'PuzzlePieceIcon',
QrcodeIcon: 'QrCodeIcon',
ReceiptTaxIcon: 'ReceiptPercentIcon',
RefreshIcon: 'ArrowPathIcon',
ReplyIcon: 'ArrowUturnLeftIcon',
RewindIcon: 'BackwardIcon',
RssIcon: null,
SaveAsIcon: 'ArrowDownOnSquareStackIcon',
SaveIcon: 'ArrowDownOnSquareIcon',
SearchCircleIcon: 'MagnifyingGlassCircleIcon',
SearchIcon: 'MagnifyingGlassIcon',
SelectorIcon: null,
SortAscendingIcon: null,
SortDescendingIcon: null,
SpeakerphoneIcon: 'MegaphoneIcon',
StatusOfflineIcon: 'SignalSlashIcon',
StatusOnlineIcon: 'SignalIcon',
SupportIcon: 'LifebuoyIcon',
SwitchHorizontalIcon: 'ArrowRightLeftIcon',
SwitchVerticalIcon: 'ArrowUpDownIcon',
TableIcon: 'TableCellsIcon',
TemplateIcon: 'RectangleGroupIcon',
TerminalIcon: 'CommandLineIcon',
ThumbDownIcon: 'HandThumbDownIcon',
ThumbUpIcon: 'HandThumbUpIcon',
TranslateIcon: 'LanguageIcon',
TrendingDownIcon: 'ArrowTrendingDownIcon',
TrendingUpIcon: 'ArrowTrendingUpIcon',
UploadIcon: 'ArrowUpTrayIcon',
UserAddIcon: 'UserPlusIcon',
UserRemoveIcon: null,
VariableIcon: null,
ViewBoardsIcon: 'ViewColumnsIcon',
ViewGridAddIcon: 'SquaresPlusIcon',
ViewGridIcon: 'Squares2x2Icon',
ViewListIcon: 'Bars4Icon',
VolumeOffIcon: 'SpeakerXMarkIcon',
VolumeUpIcon: 'SpeakerWaveIcon',
XIcon: 'XMarkIcon',
ZoomInIcon: 'MagnifyingGlassPlusIcon',
ZoomOutIcon: 'MagnifyingGlassMinusIcon',
}; |
|
Hey! Thanks for putting this list together! We're working on adding a bunch of the missing ones back. We've already added the |
|
You are doing the lord's work - thank you! |
|
@sschoger any chance of an upgrade find/replace script? |
|
|
|
@ryanburns23 Thanks for this! Just as an edit,
Is actually
|
|
Created a small migration script. I thought it could be helpful for everyone. https://gist.github.com/PicchiKevin/86d0a4cc0a872a1ae4dfac919b7c49ce |
|
@ryanburns23 @PicchiKevin Thanks for putting this together - unfortunately some of these are breaking. For example, Arrow should be Arrows:
I'll update and add more as I come across them. |
SelectorIcon: ChevronUpDownIcon |
|
Hey! We've updated the release notes to include a list of all of the icons that have been renamed along with their updated names. https://github.com/tailwindlabs/heroicons/releases/tag/v2.0.0 We also went ahead and added the icons that were missing from the set that were previously in v1 👍🏻 |
Note that this bump includes a new version of `@heroicons/react`, which changes the appearance of the outline icons. Also, many of the icon names have changed. Here's a convenient list of the changes: tailwindlabs/heroicons#750 Finally, the imports now need to specify the icon size.
Note that this bump includes a new version of `@heroicons/react`, which changes the appearance of the outline icons. Also, many of the icon names have changed. Here's a convenient list of the changes: tailwindlabs/heroicons#750 Finally, the imports now need to specify the icon size.
Note that this bump includes a new version of `@heroicons/react`, which changes the appearance of the outline icons. Also, many of the icon names have changed. Here's a convenient list of the changes: tailwindlabs/heroicons#750 Finally, the imports now need to specify the icon size. We do not bump the TypeScript pin here because `@dicebear/avatars` has some issues with strict null checks in TypeScript 4.8. See: dicebear/dicebear#239
|
Based on @PicchiKevin's script I wrote a heroicons v2 migration script that upgrades you to the latest heroicons library for either vue or react with either yarn or npm, upgrades your import statements, and upgrades your icon names. You can run it with: |
|
@ryanburns23 well done, and thank you! |
This is not super helpful. Something like the table below would be great.
refs #746, #749
The text was updated successfully, but these errors were encountered: