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

Use @wordpress/icons instead of Dashicon #3613

Closed
senadir opened this issue Jan 22, 2020 · 4 comments · Fixed by #7020
Closed

Use @wordpress/icons instead of Dashicon #3613

senadir opened this issue Jan 22, 2020 · 4 comments · Fixed by #7020
Assignees
Labels
focus: performance The issue/PR is related to performance.

Comments

@senadir
Copy link
Member

senadir commented Jan 22, 2020

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.

@senadir senadir added the focus: performance The issue/PR is related to performance. label Jan 22, 2020
@github-actions
Copy link

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 github-actions bot added the status: stale The issue/PR is stale label Jan 26, 2021
@github-actions
Copy link

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

@pmcpinto pmcpinto reopened this Feb 4, 2021
@samueljseay
Copy link
Contributor

samueljseay commented Feb 9, 2021

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:

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

icon={ 'arrow-down-alt2' }

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

<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:

  • - 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:

@samueljseay samueljseay removed the status: stale The issue/PR is stale label Feb 10, 2021
@ilyasfoo
Copy link
Contributor

ilyasfoo commented Mar 2, 2021

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

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
focus: performance The issue/PR is related to performance.
Projects
None yet
5 participants