patternfly / patternfly-elements

PatternFly Elements. A set of community-created web components based on PatternFly design.
https://patternflyelements.org/
MIT License
375 stars 85 forks source link

[feat] pfe-icon | Update to use font awesome #1622

Closed castastrophe closed 1 year ago

castastrophe commented 3 years ago

Currently pfe-icon serves rh and web prefixed icons from access.redhat.com as default icon libraries. I would like to consider migrating our default to Font Awesome (in line with PatternFly Core).

I found a hosting resource for font-awesome that includes the SVG assets: https://github.com/FortAwesome/Font-Awesome/tree/master/svgs

wesruv commented 3 years ago

@castastrophe I just talked to a bunch of our UX/Design folks for the unified nav and Patternfly and they have a subset of FA free and some PF icons that they use, I was thinking instead of adding all FA we use their subset, they even have a handy lookup table: https://www.patternfly.org/v4/guidelines/icons/#all-icons

I vote we use that for consistency, I have the icons up on the portal's static file spot (where the default icons pfe-icon uses now live). I'll have a PR shortly.

castastrophe commented 3 years ago

@wesruv This is listed as low priority and flagged for our 2.0 release so I'm not sure working through a PR on this right now is a great use of time unless it maps to a business need you have. Can you sync with @kylebuch8 on the prioritization board? In our internal ranking sheet, it's listed as #161.

castastrophe commented 3 years ago

Re: the hosting and the approach

There's a movement away from access.redhat.com's hosting for the upstream and part of what this proposal lets us do is decouple Red Hat-specific sources from the component by pointing to an open source set of assets. If you want to redirect CP to the access hosting location, you can do that in a config file for the site.

castastrophe commented 3 years ago

Example config from the pfe-icon README:

window.PfeConfig = {
  IconSets: [
    {
      name: "web",
      path: "path/to/svg/directory", // Or https://hosted-icons.com/,
      resolveIconName: function(name, iconSetName, iconSetPath) { // Optional function to resolve icon paths.
        var regex = new RegExp("^" + iconSetName + "-(.*)");
        var match = regex.exec(name);
        return iconSetPath + match[1] + ".svg";
      }
    }
  ]
};
wesruv commented 3 years ago

I need a pencil icon that's in FA for the account dropdown, so the good options I see are: Add this icon set to every site (not my fave) Add this icon set to PFE as an additional option (would much prefer)

wesruv commented 3 years ago

Ok, I talked to Kyle and I understand your comment better, I think I have a way forward, thanks!

castastrophe commented 3 years ago

@wesruv Awesome! Would you mind sharing it here please so we include that in our planning discussions?

castastrophe commented 2 years ago

@bennypowers Is this PR relevant anymore?

bennypowers commented 2 years ago

This one specifically we should consider as part of the RHDS/PFE1:1 migration