Skip to content
This repository has been archived by the owner on Jul 12, 2024. It is now read-only.

Remove the use of Dashicons and replace with @wordpress/icons or gridicons #7020

Merged
merged 13 commits into from
May 25, 2021

Conversation

louwie17
Copy link
Contributor

@louwie17 louwie17 commented May 19, 2021

Fixes #3613

As suggested in #3613, this PR removes the use of Dashicons anywhere within wcAdmin and makes use of the @wordpress/icons or gridicons, as they are tree-shakeable.
This does actually make our bundle size a little bit bigger, as the icons are individually imported, and we used window.wp.components for dashicons.
*Note: I currently can't seem to get the wordpress/icons tree shaking to work, and it is pulling in the entire library.
It seems all good now.
cc'ing @senadir & @samueljseay incase either of you know what I am missing, this is what a quick gif of the package compiled into the app/index.js.

Screenshots

Detailed test instructions:

  • Load this branch
  • Check the updated icons, there are quite a few
    • The android banner app dismiss icons (I uncommented this condition, and removed display none)
    • The move up/down and trash icons in the Dashboard overview (click on the ellipsis)
    • Remove a couple items and also click on the plus icon to add a view back in
    • Go to the products analytics page and select a custom date (the calendar icons should show)
    • Icon in shipping label I added a true || for testing purposes here

@louwie17
Copy link
Contributor Author

The only icon that looked a little different from the dashicons was the calendar icon, cc'ing @elizaan36 if this is ok? We should otherwise be able to add the dashicon calendar icon to the wordpress/icons.
Screen Shot 2021-05-19 at 10 51 52 AM

@elizaan36
Copy link
Contributor

I think the updated WordPress icon looks way better and simpler than the Dashicons one.👍

Copy link
Contributor

@samueljseay samueljseay left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks awesome to me. Thank you @louwie17 this is really high impact! 🚀

@samueljseay
Copy link
Contributor

Note, you'll just need to merge recent changes to work around e2e issues

@louwie17 louwie17 merged commit 49b3e6d into main May 25, 2021
@louwie17 louwie17 deleted the update/3613_old_dashicons branch May 25, 2021 15:14
ObliviousHarmony pushed a commit to woocommerce/woocommerce that referenced this pull request Mar 18, 2022
…ridicons` (woocommerce/woocommerce-admin#7020)

* Updated mobile banner icon with cross-small gridicon

* Update analytics dashboard icons, removing use of dashicon

* Remove use of dash icon in tag component

* Remove dash icon from ellipsis menu

* Remove use of dashicon in calendar

* Update icon imports and remove use of Dashicon in collapsible list

* Remove Dashicon usage from store alerts as it is depreciated

* Remove dashicon usage in shipping label

* Fix up old css for icons

* Removed dashicon usage in favorite button

* Update the wordpress/icons package

* Add changelogs

* Fix broken test
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Use @wordpress/icons instead of Dashicon
3 participants