Migrate from sized icons to unsized icons

[ling1726]

#20563 introduced the a version of @fluentui/react-icons with unsized icons into Fluent. In the future our current plan is to deprecate and removed sized icons from the icons package.

We should migrate all icons usages from sized to unsized. It can be done easily just by removing the size number from the icon name:

- import { Guest20Regular } from '@fluentui/react-icons';
+ import { GuestRegular } from '@fluentui/react-icons';

The following packages need to be migrated (at the current date of writing the issue):

• react-accordion
• react-avatar - Update Avatar to use resizable icons #21160
• react-badge
• react-button
• react-input
• react-card
• react-menu

[miroslavstastny]

Not all used icons have currently unsized counterpart, design is working on those (Tomi to ask them to prioritize).

[tomi-msft]

• react-accordion icon
  • Used Icon
    • Rocket20Regular
  • Replaced By
    • RocketRegular
• react-avatar icons
  • Used Icons
    • Person16Regular
    • Person20Regular
    • Person24Regular
    • Person28Regular
    • Person32Regular
    • Person48Regular
    • Guest20Regular
  • Replaced By
    • PersonRegular
    • GuestRegular
• react-badge icons
  • Need to request
    • PresenceAvailable20Regular
    • PresenceAvailable20Filled
    • PresenceAway20Filled
    • PresenceBusy20Filled
    • PresenceDnd20Regular
    • PresenceDnd20Filled
    • PresenceOof20Regular
    • PresenceOffline20Regular
    • PresenceUnknown20Regular
• react-button icons
  • Used Icons
    • ChevronDown20Regular
    • ChevronDown24Regular
  • Replaced By
    • ChevronDownRegular
• react-input icons
  • Used Icons
    • Search16Regular
    • Search20Regular
    • Search24Regular
    • Dismiss16Regular
    • Dismiss20Regular
    • Dismiss24Regular
  • Replaced By
    • SearchRegular
    • DismissRegular
• react-card icons
  • Used Icons
    • Open16Regular
    • MoreVertical20Regular
    • ArrowReply16Regular
    • Share16Regular
    • MoreHorizontal16Regular
  • Replaced By
    • OpenRegular
    • MoreVerticalRegular
    • ArrowReplyRegular
    • ShareRegular
    • MoreHorizontalRegular
• react-menu icons
  • Used Icons
    • Cut20Regular
    • ClipboardPaste20Regular
    • Edit20Regular
    • ChevronRight20Regular
    • ChevronLeft20Regular
    • Checkmark16Filled
  • Replaced By
    • CutRegular
    • ClipboardPasteRegular
    • EditRegular
    • ChevronRightRegular
    • ChevronLeftRegular
    • CheckmarkFilled

[ling1726]

@tomi-msft the only icons that we need to request are used in presence badge correct ?

[tomi-msft]

@ling1726 Yes that's right. In the mean time it should be acceptable to use the sized ones