Wp-calypso: Remove Noticons

Created on 29 Mar 2018  路  6Comments  路  Source: Automattic/wp-calypso

These are the last remaining significant uses of Noticons in wp-calypso. All other mentions of noticon are in comments, unused mixins, etc.

Context: The Noticon icon set is deprecated, and the Gridicons set is currently the standard set, and the only UI icons we should be using.

Please feel free to take one, spin up a PR, and check them off. This issue will be the master issue.

  • [x] [_dropdowns.scss](https://github.com/Automattic/wp-calypso/blob/master/assets/stylesheets/shared/_dropdowns.scss#L96) - Probably unused css (#23771)
  • [x] [Checkboxes](https://github.com/Automattic/wp-calypso/blob/master/assets/stylesheets/shared/_forms.scss#L171) - https://github.com/Automattic/wp-calypso/pull/23749
  • [x] References in components/head/test - I don't know what this is for
  • [x] [Billing History](https://github.com/Automattic/wp-calypso/blob/master/client/me/billing-history/style.scss#L178) - probably unused css (#23770)

The checkboxes are the biggest challenge. I made a PR that uses custom svgs, and updated the style. This still inserts the svg with css though, not ideal. There have been attempts to make a new checkbox component, but they never shipped. I'm fine if someone wants to hijack my PR or start over: https://github.com/Automattic/wp-calypso/pull/23749

Tip: For some reason, searching noticon on Github yields fewer results than searching in Atom.

cc @scruffian @shaunandrews @MichaelArestad

Framework [Type] Help Request [Type] Janitorial

All 6 comments

I'm happy to look into Billing History.

I'll look into _dropdowns.scss too.

References in components/head/test - I don't know what this is for

We can't remove these until all the other uses of Noticons are gone, as this is where we include the CSS for them.

I'm adding this issue to the Team Calypso project. When this work is finished, we can save one HTTP request for _noticons.css_ on every initial load. It's 21kB gzipped and 33kB parsed CSS.

Once the PR above (#23974) is merged then we can remove Noticons from the project entirely.

This is done.

Was this page helpful?
0 / 5 - 0 ratings