Update Icons page on website with updated icons and recommentations

[mcarrano]

Update the Icons page to reflect the PatternFly icon and usage recommendations found in this spreadsheet:

• icons in yellow (12) have open questions. These icons have notes, some of which instruct to keep the usage text blank or leave the icon off the webpage (until we get more info from the team)
• icons in pink (9) these will be added to a migration table. These icons have notes, some of which instruct to leave the icon off of the webpage (until we create the icon migration table), but the new icon recommendations will remain on the webpage and are marked as such.
• icons in blue (4) need to be added to the PF font. There is a separate story for adding them here: PatternFly font: Add icons, fix SVGs patternfly#2707
• any new usage text is prepended with "Suggestion:" Any usage text with a strikethrough should be left off of the webpage for now (until we get more info from the team)

Columns to display: Icon Usage, Icon, Icon Name, Icon Type, Font Set

The original icon story is here: patternfly/patternfly-design#787

Work with @bdellasc throughout the process

cc @rachael-phillips @LHinson

[mcarrano]

Note that there is an older issue here that includes further enhancement recommendations: #1358

[gdoyle1]

Here's what I've done so far https://marvelapp.com/dj2867b! I'd love some feedback on how to organize the links within the icons table better (or really all the actions so Copy React, Copy HTML, and Download SVG).

My plan for next steps is:

1. Refine the icon sizes section copy and add the size variables
2. Refine the icon colors section copy and add the color variables
3. Possibly minimize the width of the "all icons" + table section

@mcarrano

[mcarrano]

Looks good @gdoyle1 . I left a couple of comments. Not clear what Copy React or Copy HTML actually do. What are they copying?

@mceledonia @rachael-phillips @bdellasc would also be interested in your thoughts.

[gdoyle1]

Looks good @gdoyle1 . I left a couple of comments. Not clear what Copy React or Copy HTML actually do. What are they copying?

@mcarrano They're copying snippets of code it looks like - this is what they look like on the current PF icons page:
HTML -
React - import { AddCircleOIcon } from '@patternfly/react-icons'

I only assumed those get used and are useful ... maybe not?

[bdellasc]

@mcarrano @gdoyle1 - I think that's a question for the front-end devs, if it's something they use on a regular basis? I'd hate to lose something that is useful for their work.

@rachael-phillips @mceledonia

[gdoyle1]

@mcarrano @gdoyle1 - I think that's a question for the front-end devs, if it's something they use on a regular basis? I'd hate to lose something that is useful for their work.

@bdellasc Ok I'll look more into this then!

[rachael-phillips]

Hi all @gdoyle1 @bdellasc @mcarrano my question is are the graphics on this page helpful? I am all about showing the different sizes if we think that is helpful, but if that is the case, can we show them more in context? Overall, I would opt for the text and then get straight to the table, to get to the table above the fold.

[gdoyle1]

@rachael-phillips I totally agree - I wasn't really sure what to put there for graphics or if we even need them. @mceledonia do you think graphics are needed to explain icon sizes and colors?