fix(icon): use icons package (#2502)

* fix(icon): use icons package

* fix(icon): build out fa6 icons

* feat(icon): getIconUrl: string

* chore: fix text command dependencies

* docs(icon): typos, icon sets, search

Author: bennypowers

.changeset/pf-icon-allow-string-getter.md

@@ -0,0 +1,5 @@
+---
+"@patternfly/elements": minor
+---
+`<pf-icon>`: allow `getIconUrl` to return a string, permitting users to import 
+icons from 'bare module specifiers'.

.changeset/pf-icon-copy-from-package.md

@@ -0,0 +1,6 @@
+---
+"@patternfly/elements": patch
+---
+`<pf-icon>`: use fontawesome 5 icons. **NOTE**: imports from
+`@patternfly/elements/pf-icon/icons/` are deprecated and will be removed in the 
+next major version.

.gitignore

@@ -63,6 +63,7 @@ tools/*/test/**/*.png
 !core/*/demo/*
 !tools/*/demo/*
 
+elements/pf-icon/icons
 !elements/pf-icon/demo/icons/**/*.js
 
 !scripts/**/*.js

elements/package.json

@@ -117,6 +117,7 @@
     "Wes Ruvalcaba"
   ],
   "dependencies": {
+    "@patternfly/icons": "^1.0.2",
     "@patternfly/pfe-core": "^2.3.0",
     "lit": "2.6.1",
     "tslib": "^2.4.1"

elements/pf-icon/BaseIcon.ts

@@ -7,7 +7,7 @@ import { Logger } from '@patternfly/pfe-core/controllers/logger.js';
 
 import style from './BaseIcon.css';
 
-export type URLGetter = (set: string, icon: string) => URL;
+export type URLGetter = (set: string, icon: string) => URL | string;
 
 /** requestIdleCallback when available, requestAnimationFrame when not */
 const ric = window.requestIdleCallback ?? window.requestAnimationFrame;
@@ -140,16 +140,21 @@ export abstract class BaseIcon extends LitElement {
   protected async load() {
     const { set, icon, } = this;
     const getter = this.#class.getters.get(set) ?? this.#class.getIconUrl;
-    let pathname = 'UNKNOWN ICON';
+    let spec = 'UNKNOWN ICON';
     if (set && icon) {
       try {
-        ({ pathname } = getter(set, icon));
-        const mod = await import(pathname);
+        const gotten = getter(set, icon);
+        if (gotten instanceof URL) {
+          spec = gotten.pathname;
+        } else {
+          spec = gotten;
+        }
+        const mod = await import(spec);
         this.content = mod.default instanceof Node ? mod.default.cloneNode(true) : mod.default;
         await this.updateComplete;
         this.dispatchEvent(new Event('load', { bubbles: true }));
       } catch (error: unknown) {
-        const event = new IconLoadError(pathname, error as Error);
+        const event = new IconLoadError(spec, error as Error);
         this.#logger.error((error as IconLoadError).message);
         this.dispatchEvent(event);
       }

elements/pf-icon/demo/pf-icon.html

@@ -1,6 +1,3 @@
-<link rel="stylesheet" href="demo.css">
-<script type="module" src="pf-icon.js"></script>
-
 <section id="sizes">
   <h2>Icon Sizes and Colours</h2>
   <dl>
@@ -19,13 +16,8 @@ <h2>Icon Sizes and Colours</h2>
   </dl>
 </section>
 
-<section id="sets">
-  <h2>Default Icon Sets</h2>
-  <label>Icon Name
-    <input id="icon-search" list="icons-list" placeholder="icon-name">
-    <datalist id="icons-list"></datalist>
-  </label>
-  <p>Use the text field above to search for an icon name. Click the icon to copy it's HTML.</p>
-  <p>PatternFly Icon comes with three built-in icon sets, the default is fontawesome solid</p>
-  <output id="pf-icon-demo-output"></output>
-</section>
+<link rel="stylesheet" href="demo.css">
+<script type="module">
+  import '@patternfly/elements/pf-icon/pf-icon.js';
+</script>
+

elements/pf-icon/demo/pf-icon.js

@@ -22,8 +22,11 @@ async function copy(event) {
 }
 
 function renderIcons(results) {
+  render(repeat(iconSets, ([setName, icons]) => repeat(icons, icon => `${setName}-${icon}`, icon => html`
+    <option value="${icon}">${setName} - ${icon}</option>
+  `)), list);
   render(repeat(iconSets, ([setName, icons]) => html`
-    <h3 id=${setName}>${names.get(setName)}</h3>
+    <h2 id=${setName}>${names.get(setName)}</h2>
     <ul>${repeat(icons, icon => `${setName}-${icon}`, icon => html`
       <li ?hidden=${(typeof results === 'string' ? icon !== results : (results && !results[setName]?.[icon]))}>
         <button title="${icon}"
@@ -47,22 +50,18 @@ const search = document.getElementById('icon-search');
 
 const list = document.getElementById('icons-list');
 
-search.autocompleteRequest = function({ query }, cb) {
-  const results = fuse.search(query);
-  cb(results.map(x => x.item.icon));
-  renderIcons(results.reduce((acc, { item: { set, icon } }) => ({
-    ...acc,
-    [set]: {
-      ...acc[set],
-      [icon]: true
-    }
-  }), {}));
-};
-
-search.addEventListener('input', e => renderIcons(e.target.value || undefined));
+search.addEventListener('input', /** @this{HTMLInputElement}*/function() {
+  renderIcons(!this.value ? undefined : fuse
+    .search(this.value)
+    .reduce((acc, { item: { set, icon } }) => ({
+      ...acc,
+      [set]: {
+        ...acc[set],
+        [icon]: true
+      }
+    }), {}));
+});
 
 renderIcons(search.value || undefined);
 
-render(repeat(iconSets, ([setName, icons]) => repeat(icons, icon => `${setName}-${icon}`, icon => html`
-  <option value="${icon}">${setName} - ${icon}</option>
-`)), list);
+document.querySelector('form').addEventListener('submit', e => e.preventDefault());

elements/pf-icon/demo/sets.html

@@ -0,0 +1,17 @@
+<h1>Default Icon Sets</h1>
+<form>
+<p>Use the text field to search for an icon name. Click the icon to copy it's HTML.</p>
+<p>PatternFly Icon comes with three built-in icon sets, the default is fontawesome solid</p>
+
+<label>Icon Name
+  <input id="icon-search" list="icons-list" placeholder="icon-name">
+  <datalist id="icons-list"></datalist>
+</label>
+
+<output id="pf-icon-demo-output" name="output"></output>
+
+</form>
+
+<link rel="stylesheet" href="demo.css">
+<script type="module" src="pf-icon.js"></script>
+

elements/pf-icon/docs/pf-icon.md

@@ -58,11 +58,11 @@ Icons are JavaScript module which export a [lit renderable][renderable],
 typically an inline SVG element [template literal][template-literals] tagged
 with the Lit [`svg`][svg-tag] template tag. To register a new icon set, call
 the static `addIconSet` method with the set name and a getter function. The
-getter function takes the icon set and icon name and returns a URL object that
-points to the icon's JavaScript module.
+getter function takes the icon set and icon name and returns a URL object or a 
+string that points to the icon's JavaScript module.
 
 ```ts
-type getter = (set: string, icon: string) => URL
+type getter = (set: string, icon: string) => URL | string
 ```
 
 ```javascript
@@ -98,7 +98,7 @@ PfIcon.addIconSet('patternfly', (set, icon) => {
 ### Override the Default Icon Sets
 
 Icons are [loaded lazily](#loading) by default, so there's no performance
-penalty for keeping the default icon sets arond and unused. However, if you'd
+penalty for keeping the default icon sets around and unused. However, if you'd
 like to override the default icon sets across the entire page, you can use
 `addIconSet` with the `fas`, `far`, and `patternfly` set names:
 
@@ -115,8 +115,9 @@ To change the default set name, you can also override `PfIcon.defaultIconSet`
 PfIcon.defaultIconSet = 'patternfly';
 ```
 
-Now when `<pf-icon>` is used, it will automatically load icon modules from
-`https://static.redhat.com/icons/js/patternfly/...`.
+Now when `<pf-icon>` is loaded from the [RedHat DX 
+CDN](https://redhatstatic.com/dx/), it will automatically load icon modules from 
+the CDN as well.
 
 {% endband %}