Use @wordpress/icons instead of Dashicon

[senadir]

Is your feature request related to a problem? Please describe.
Yesterday, Riad (from the Gutenberg team) and I, made some progress on the new icon package, mainly WordPress/gutenberg#17055, WordPress/gutenberg#19809, and WordPress/gutenberg#19808
Icons are now tree shaken, we should start migrating away from Dashicon toward a more modern approach, the previous approach included the whole dashicon (90kb) set each time you used a single Icon, this prevented us in WooCommerce Blocks from using some of the components in the frontend, it also caused large bundle sizes.

Describe the solution you'd like
Migrate to <Icon icon={ name } /> instead of <Icon icon="name" />, if the icon is already migrated in Gutenberg, then use the new one, if not, wait until it’s moved or help move it, example.

Depending on how you use WordPress packages, you might need to change the way you bundle packages to get extra gains on the UI, so instead of relying on icons in external (as in wp.icons, which is not possible) you will have to call it directly from npm.

Should this be prioritized? Why?

There is no urgent prioritization, but it's something to work on by time.

Additional context
Add any other context or screenshots about the feature request here.

[github-actions]

This issue has been automatically marked as stale because it has not had any recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[github-actions]

This issue was automatically closed due to being stale. Please feel free to re-open it if you still experience this problem.

[samueljseay]

We're actually almost there with this. We use gridicons as well but thats ok as long as we just import what we need because those are tree-shaken. I'll add some info on what's left to do.

• - Need replacement for no-alt, I think the replacement in gridicons is cross-small. Usages:

woocommerce-admin/client/mobile-banner/index.js

Line 48 in 4c744ad

icon="no-alt"

• - Need replacement for various arrows. direct replacements exist in gberg. Usages:

woocommerce-admin/client/dashboard/section-controls.js

Line 55 in 4c744ad

icon={ 'arrow-up-alt2' }

woocommerce-admin/client/dashboard/section-controls.js

Line 64 in 4c744ad

icon={ 'arrow-down-alt2' }

• - Need replacement for trash. gberg replacement exists. Usages:

woocommerce-admin/client/dashboard/section-controls.js

Line 71 in 4c744ad

<Icon icon={ 'trash' } label={ __( 'Remove block' ) } />

• - Need replacement for dismiss. I think in gridicons the closest is cross-circle or in gberg cancel-circle-filled Usages:

woocommerce-admin/packages/components/src/select-control/tags.js

Line 77 in 4c744ad

<Icon icon="dismiss" />

• - In a couple places we have arrays that are used as props to components passing in strings for icon names. These will need to be replaced with icons from gberg set. Usages:

woocommerce-admin/client/dashboard/default-sections.js

Line 48 in 4c744ad

icon: 'arrow-right-alt',

woocommerce-admin/client/dashboard/default-sections.js

Line 67 in 4c744ad

icon: 'chart-bar',

woocommerce-admin/client/dashboard/default-sections.js

Line 88 in 4c744ad

icon: 'editor-ol',

woocommerce-admin/client/profile-wizard/steps/theme/preview.js

Line 19 in 4c744ad

icon: 'phone_android',

• - We'll also need to rewrite the documentation for the dashboard extensibility to instruct people to pass an icon not a string:

  woocommerce-admin/client/dashboard/README.md

  Line 19 in 4c744ad

  icon: 'arrow-right-alt',

  and the example code too:

  woocommerce-admin/docs/examples/extensions/dashboard-section/js/index.js

  Line 139 in 4c744ad

  {

[ilyasfoo]

I feel this might be a great issue for a cooldown! Thanks for the comprehensive list Sam!