feat(icon): add <rh-icon>

elements/rh-back-to-top/rh-back-to-top.css

@@ -38,9 +38,9 @@
   display: none;
 }
 
-pf-icon {
-  /* override icon size as default sm variant is incorrect */
-  --pf-icon--size: var(--rh-font-size-body-text-xs, 0.75rem);
+rh-icon {
+  /* Non Standard Icon size */
+  --rh-icon-size: var(--rh-font-size-body-text-xs, 0.75rem);
 
   vertical-align: -0.125rem;
 }

elements/rh-back-to-top/rh-back-to-top.ts

@@ -5,7 +5,7 @@ import { ifDefined } from 'lit/directives/if-defined.js';
 
 import { Logger } from '@patternfly/pfe-core/controllers/logger.js';
 
-import '@patternfly/elements/pf-icon/pf-icon.js';
+import '@rhds/elements/rh-icon/rh-icon.js';
 
 import styles from './rh-back-to-top.css';
 
@@ -87,7 +87,7 @@ export class RhBackToTop extends LitElement {
     return html`
       <a href="${ifDefined(this.href)}" ?hidden="${!this.#visible}" part="trigger">
         <slot>Back to top</slot>
-        <pf-icon icon="angle-up" set="fas"></pf-icon>
+        <rh-icon set="ui" icon="caret-up"></rh-icon>
       </a>
     `;
   }

elements/rh-cta/rh-cta.css

@@ -87,13 +87,11 @@ pf-icon {
   margin-inline-start: var(--rh-space-md, 8px);
 }
 
-svg {
+rh-icon {
   vertical-align: middle;
   margin-inline-start: var(--rh-space-md, 8px);
-  display: inline;
+  display: inline-block;
   fill: currentcolor;
-  width: var(--_arrow-size);
-  height: var(--_arrow-size);
   translate: 0 0;
   transition: translate var(--_trans);
 
@@ -157,11 +155,11 @@ a:focus-within,
   --_text-decoration: var(--rh-cta-hover-text-decoration, var(--_hover-text-decoration));
 }
 
-:host(:hover) #container svg {
+:host(:hover) #container rh-icon {
   translate: 3px 0;
 }
 
-:host(:hover) #container.rtl svg {
+:host(:hover) #container.rtl rh-icon {
   translate: -3px 0;
 }
 
@@ -655,12 +653,12 @@ a:focus-within,
 
 /* chrome <= 103 */
 @supports not (translate: 0 0) {
-  svg {
+  rh-icon {
     transform: translate(0, 0);
     transition: transform var(--_trans);
   }
 
-  #container.rtl svg { transform: translate(0, 0) rotate(180deg); }
-  :host(:hover) #container svg { transform: translate(3px, 0); }
-  :host(:hover) #container.rtl svg { transform: translate(-3px, 0) rotate(180deg); }
+  #container.rtl rh-icon { transform: translate(0, 0) rotate(180deg); }
+  :host(:hover) #container rh-icon { transform: translate(3px, 0); }
+  :host(:hover) #container.rtl rh-icon { transform: translate(-3px, 0) rotate(180deg); }
 }

elements/rh-cta/rh-cta.ts

@@ -10,6 +10,10 @@ import { DirController } from '../../lib/DirController.js';
 
 import { colorContextConsumer, type ColorTheme } from '../../lib/context/color/consumer.js';
 
+import type { IconNameFor, IconSetName } from '@rhds/icons';
+
+import '@rhds/elements/rh-icon/rh-icon.js';
+
 import style from './rh-cta.css';
 
 function isSupportedContent(el: Element | null): el is HTMLAnchorElement | HTMLButtonElement {
@@ -108,12 +112,12 @@ export class RhCta extends LitElement {
   /**
    * Icon name
    */
-  @property({ reflect: true }) icon?: string;
+  @property({ reflect: true }) icon?: IconNameFor<IconSetName>;
 
   /**
    * Icon set
    */
-  @property({ attribute: 'icon-set' }) iconSet = 'far';
+  @property({ attribute: 'icon-set' }) iconSet: IconSetName = 'ui';
 
   /**
    * Sets color theme based on parent context
@@ -122,7 +126,7 @@ export class RhCta extends LitElement {
 
   protected override async getUpdateComplete(): Promise<boolean> {
     if (this.icon) {
-      await import('@patternfly/elements/pf-icon/pf-icon.js');
+      await import('@rhds/elements/rh-icon/rh-icon.js');
     }
     return super.getUpdateComplete();
   }
@@ -143,24 +147,15 @@ export class RhCta extends LitElement {
     const svg = isDefault;
     const iconOrSvg = isDefault || !!icon;
     const follower = !iconOrSvg ? '' : variant !== 'brick' && icon ? html`<!--
-   --><pf-icon icon=${icon}
-               set=${iconSet ?? 'far'}
-               size="md"></pf-icon>` : variant ? '' : html`<!--
-   --><svg xmlns="http://www.w3.org/2000/svg"
-           viewBox="0 0 31.56 31.56"
-           width="1em"
-           focusable="false"
-           aria-hidden="true">
-        <path d="M15.78 0l-3.1 3.1 10.5 10.49H0v4.38h23.18l-10.5 10.49 3.1 3.1 15.78-15.78L15.78 0z" />
-      </svg>`;
+   --><rh-icon icon=${icon} set=${iconSet ?? 'ui'}></rh-icon>` : variant ? '' : html`<!--
+   --><rh-icon  set="ui" icon="arrow-right"></rh-icon>`;
     return html`
       <span id="container"
             part="container"
             class=${classMap({ rtl, icon: !!icon, svg, [on]: !!on })}
             @slotchange=${this.firstUpdated}>${variant === 'brick' && icon ? html`
-        <pf-icon size="md"
-                 icon=${icon}
-                 set="${iconSet ?? 'far'}"></pf-icon>` : ''}${href ? html`
+        <rh-icon icon=${icon}
+                 set="${iconSet ?? 'ui'}"></rh-icon>` : ''}${href ? html`
         <a href=${href}
            download="${ifDefined(download)}"
            rel="${ifDefined(rel)}"

elements/rh-footer/demo/rh-footer.html

@@ -5,7 +5,7 @@
   <rh-footer-social-link slot="social-links" icon="linkedin"><a href="https://www.linkedin.com/company/red-hat" data-analytics-region="social-links-exit" data-analytics-category="Footer|social-links" data-analytics-text="LinkedIn">LinkedIn</a></rh-footer-social-link>
   <rh-footer-social-link slot="social-links" icon="youtube"><a href="https://www.youtube.com/user/RedHatVideos" data-analytics-region="social-links-exit" data-analytics-category="Footer|social-links" data-analytics-text="YouTube">YouTube</a></rh-footer-social-link>
   <rh-footer-social-link slot="social-links" icon="facebook"><a href="https://www.facebook.com/redhatinc" data-analytics-region="social-links-exit" data-analytics-category="Footer|social-links" data-analytics-text="Facebook">Facebook</a></rh-footer-social-link>
-  <rh-footer-social-link slot="social-links" icon="twitter"><a href="https://twitter.com/RedHat" data-analytics-region="social-links-exit" data-analytics-category="Footer|social-links" data-analytics-text="Twitter">X/Twitter</a></rh-footer-social-link>
+  <rh-footer-social-link slot="social-links" icon="x"><a href="https://twitter.com/RedHat" data-analytics-region="social-links-exit" data-analytics-category="Footer|social-links" data-analytics-text="Twitter">X/Twitter</a></rh-footer-social-link>
   <h3 slot="links" data-analytics-text="Products">Products</h3>
   <ul slot="links">
     <li><a href="https://redhat.com/en/technologies/linux-platforms/enterprise-linux" data-analytics-category="Footer|Products" data-analytics-text="Red Hat Enterprise Linux">Red Hat Enterprise Linux</a></li>

elements/rh-footer/rh-footer-social-link.css

@@ -1,7 +1,7 @@
 :host {
   display: block;
 
-  --pf-icon--size: var(--rh-footer--social-icon--size, var(--rh-size-icon-02, 24px));
+  --rh-icon-size: var(--rh-footer--social-icon--size, var(--rh-size-icon-02, 24px));
 }
 
 [hidden] {

elements/rh-footer/rh-footer-social-link.ts

@@ -29,16 +29,11 @@ export class RhFooterSocialLink extends LitElement {
       const newDiv = oldDiv.cloneNode(true) as Element;
       // remove the _rendered content
       newDiv.querySelectorAll('[_rendered]').forEach(i => i.remove());
-      /* Temporary fix for x-twitter icon and pf-icon not supporting that icon given font awesome v5 */
-      if (this.icon === 'twitter') {
-        newDiv.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" fill="currentcolor" height="24" width="24" viewBox="0 0 512 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2023 Fonticons, Inc.--><path d="M389.2 48h70.6L305.6 224.2 487 464H345L233.7 318.6 106.5 464H35.8L200.7 275.5 26.8 48H172.4L272.9 180.9 389.2 48zM364.4 421.8h39.1L151.1 88h-42L364.4 421.8z"/></svg><span hidden>${newDiv.innerHTML}</span>`;
-      } else {
-        // NB: icons are restricted to fab set, so as not to require a minor release
-        // rh-icon is slated to deal with this problem in-house
-        newDiv.innerHTML = `<pf-icon icon="${this.icon ?? ''}"
-                                    set="fab"
-                                    loading="eager">${newDiv.innerHTML}</pf-icon>`;
-      }
+      // NB: icons are restricted to social set, so as not to require a minor release
+      // rh-icon is slated to deal with this problem in-house
+      newDiv.innerHTML = `<rh-icon icon="${this.icon ?? ''}"
+                            set="social"
+                            loading="eager">${newDiv.innerHTML}</rh-icon>`;
       // add a11y settings
       newDiv.setAttribute('aria-label', newDiv.textContent || '');
       if (!newDiv.getAttribute('aria-label')) {

elements/rh-footer/rh-footer.ts

@@ -5,7 +5,7 @@ import { classMap } from 'lit/directives/class-map.js';
 
 import { getRandomId } from '@patternfly/pfe-core/functions/random.js';
 import { Logger } from '@patternfly/pfe-core/controllers/logger.js';
-import '@patternfly/elements/pf-icon/pf-icon.js';
+import '@rhds/elements/rh-icon/rh-icon.js';
 import '@rhds/elements/rh-accordion/rh-accordion.js';
 
 export { RhFooterUniversal } from './rh-footer-universal.js';

elements/rh-footer/test/rh-footer.spec.ts

@@ -84,7 +84,7 @@
       <rh-cta><a href="#blocks">Sign up now</a></rh-cta>
     </rh-footer-block>
     <rh-footer-block slot="main-secondary">
       <h3 slot="header">Select a language</h3>
       <p>insert language switcher here...</p>
     </rh-footer-block>
     <rh-footer-universal slot="universal">
@@ -430,8 +430,8 @@
         const element = await fixture<RhFooter>(KITCHEN_SINK_TEMPLATE);
         const socialLink = element.querySelector('rh-footer-social-link');
         await aTimeout(200);
-        // we need to reach into pf-icon to get the actual size of the svg.
-        const icon = socialLink?.querySelector('pf-icon')?.shadowRoot?.querySelector('svg');
+        // we need to reach into rh-icon to get the actual size of the svg.
+        const icon = socialLink?.querySelector('rh-icon')?.shadowRoot?.querySelector('svg');
         if (icon) {
           expect(getComputedStyle(icon).height).to.equal(tokens.get('--rh-size-icon-02'));
         }