fix pro+ icon family/variants; closes #1951

packages/webawesome/docs/docs/components/icon.md

@@ -396,6 +396,20 @@ If you're a [Font Awesome Pro+ customer](https://fontawesome.com/), you have acc
     </div>
   </div>
 
+  <div class="wa-flank" style="--flank-size: 10ch;">
+    <a href="https://fontawesome.com/icons/packs/utility" target="_blank">Utility</a>
+    <div class="wa-cluster" style="font-size: 1.5em;">
+      <wa-icon family="utility" variant="semibold" name="house"></wa-icon>
+      <wa-icon
+        family="utility-duo"
+        variant="semibold"
+        name="house"
+        style="--secondary-color: skyblue; --secondary-opacity: 0.8;"
+      ></wa-icon>
+      <wa-icon family="utility-fill" variant="semibold" name="house"></wa-icon>
+    </div>
+  </div>
+
   <div class="wa-flank" style="--flank-size: 10ch;">
     <a href="https://fontawesome.com/icons/packs/whiteboard" target="_blank">Whiteboard</a>
     <div class="wa-cluster" style="font-size: 32px;">

packages/webawesome/docs/docs/resources/changelog.md

@@ -24,6 +24,7 @@ Components with the <wa-badge variant="warning">Experimental</wa-badge> badge sh
 - [Docs]: component APIs like slots, state, methods, etc, are now alphabetized [pr:1895]
 - [Docs]: component APIs now properly check their inheritance chain [pr:1895]
 - [Docs]: Included framework specific documentation for Svelte, Vue, and Angular. [pr:1895]
+- Fixed a bug in `<wa-icon>` to support Font Awesome Pro+ icon families that include qualifiers (e.g., `family="jelly-duo"` now works correctly instead of requiring `family="jelly" variant="duo-regular"`) and updated Font Awesome to 7.1.0
 - Fixed a bug in `<wa-dropdown>` where submenu detection would not work in shadow dom. [pr:]
 - Fixed a bug in `<wa-combobox>` that prevented the listbox from opening when options were preselected [issue:1883]
 - Fixed a bug in `<wa-combobox>` that prevented the listbox from opening when options were preselected [issue:1883]
@@ -542,4 +543,4 @@ Many of these changes and improvements were the direct result of feedback from u
 
 </details>
 
-Did we miss something? [Let us know!](https://github.com/shoelace-style/webawesome/discussions)
+Did we miss something? [Let us know!](https://github.com/shoelace-style/webawesome/discussions)

packages/webawesome/src/components/icon/library.default.ts

@@ -1,7 +1,7 @@
 import { getKitCode } from '../../utilities/base-path.js';
 import type { IconLibrary } from './library.js';
 
-const FA_VERSION = '7.0.1';
+const FA_VERSION = '7.1.0';
 
 function getIconUrl(name: string, family: string, variant: string) {
   const kitCode = getKitCode();
@@ -9,10 +9,16 @@ function getIconUrl(name: string, family: string, variant: string) {
   let folder = 'solid';
 
   // Notdog (Pro+)
+  // Correct usage: family="notdog" or family="notdog-duo", variant="solid"
   if (family === 'notdog') {
-    if (variant === 'solid') folder = 'solid';
-    if (variant === 'duo-solid') folder = 'duo-solid';
-    return `https://ka-p.fontawesome.com/releases/v${FA_VERSION}/svgs/notdog-${folder}/${name}.svg?token=${encodeURIComponent(kitCode)}`;
+    // NOTE: variant="duo-solid" is deprecated, use family="notdog-duo" variant="solid" instead
+    if (variant === 'solid') folder = 'notdog-solid';
+    if (variant === 'duo-solid') folder = 'notdog-duo-solid';
+    return `https://ka-p.fontawesome.com/releases/v${FA_VERSION}/svgs/${folder}/${name}.svg?token=${encodeURIComponent(kitCode)}`;
+  }
+  if (family === 'notdog-duo') {
+    folder = 'notdog-duo-solid';
+    return `https://ka-p.fontawesome.com/releases/v${FA_VERSION}/svgs/${folder}/${name}.svg?token=${encodeURIComponent(kitCode)}`;
   }
 
   // Chisel (Pro+)
@@ -26,18 +32,35 @@ function getIconUrl(name: string, family: string, variant: string) {
   }
 
   // Jelly (Pro+)
+  // Correct usage: family="jelly", family="jelly-duo", or family="jelly-fill", variant="regular"
   if (family === 'jelly') {
-    if (variant === 'regular') folder = 'regular';
-    if (variant === 'duo-regular') folder = 'duo-regular';
-    if (variant === 'fill-regular') folder = 'fill-regular';
-    return `https://ka-p.fontawesome.com/releases/v${FA_VERSION}/svgs/jelly-${folder}/${name}.svg?token=${encodeURIComponent(kitCode)}`;
+    // NOTE: variant="duo-regular" and variant="fill-regular" are deprecated
+    // Use family="jelly-duo" variant="regular" or family="jelly-fill" variant="regular" instead
+    if (variant === 'regular') folder = 'jelly-regular';
+    if (variant === 'duo-regular') folder = 'jelly-duo-regular';
+    if (variant === 'fill-regular') folder = 'jelly-fill-regular';
+    return `https://ka-p.fontawesome.com/releases/v${FA_VERSION}/svgs/${folder}/${name}.svg?token=${encodeURIComponent(kitCode)}`;
+  }
+  if (family === 'jelly-duo') {
+    folder = 'jelly-duo-regular';
+    return `https://ka-p.fontawesome.com/releases/v${FA_VERSION}/svgs/${folder}/${name}.svg?token=${encodeURIComponent(kitCode)}`;
+  }
+  if (family === 'jelly-fill') {
+    folder = 'jelly-fill-regular';
+    return `https://ka-p.fontawesome.com/releases/v${FA_VERSION}/svgs/${folder}/${name}.svg?token=${encodeURIComponent(kitCode)}`;
   }
 
   // Slab (Pro+)
+  // Correct usage: family="slab" or family="slab-press", variant="regular"
   if (family === 'slab') {
-    if (variant === 'solid' || variant === 'regular') folder = 'regular';
-    if (variant === 'press-regular') folder = 'press-regular';
-    return `https://ka-p.fontawesome.com/releases/v${FA_VERSION}/svgs/slab-${folder}/${name}.svg?token=${encodeURIComponent(kitCode)}`;
+    // NOTE: variant="press-regular" is deprecated, use family="slab-press" variant="regular" instead
+    if (variant === 'solid' || variant === 'regular') folder = 'slab-regular';
+    if (variant === 'press-regular') folder = 'slab-press-regular';
+    return `https://ka-p.fontawesome.com/releases/v${FA_VERSION}/svgs/${folder}/${name}.svg?token=${encodeURIComponent(kitCode)}`;
+  }
+  if (family === 'slab-press') {
+    folder = 'slab-press-regular';
+    return `https://ka-p.fontawesome.com/releases/v${FA_VERSION}/svgs/${folder}/${name}.svg?token=${encodeURIComponent(kitCode)}`;
   }
 
   // Thumbprint (Pro+)
@@ -50,6 +73,21 @@ function getIconUrl(name: string, family: string, variant: string) {
     return `https://ka-p.fontawesome.com/releases/v${FA_VERSION}/svgs/whiteboard-semibold/${name}.svg?token=${encodeURIComponent(kitCode)}`;
   }
 
+  // Utility (Pro+)
+  // Correct usage: family="utility", family="utility-duo", or family="utility-fill", variant="semibold"
+  if (family === 'utility') {
+    folder = 'utility-semibold';
+    return `https://ka-p.fontawesome.com/releases/v${FA_VERSION}/svgs/${folder}/${name}.svg?token=${encodeURIComponent(kitCode)}`;
+  }
+  if (family === 'utility-duo') {
+    folder = 'utility-duo-semibold';
+    return `https://ka-p.fontawesome.com/releases/v${FA_VERSION}/svgs/${folder}/${name}.svg?token=${encodeURIComponent(kitCode)}`;
+  }
+  if (family === 'utility-fill') {
+    folder = 'utility-fill-semibold';
+    return `https://ka-p.fontawesome.com/releases/v${FA_VERSION}/svgs/${folder}/${name}.svg?token=${encodeURIComponent(kitCode)}`;
+  }
+
   // Classic
   if (family === 'classic') {
     if (variant === 'thin') folder = 'thin';
@@ -108,10 +146,16 @@ const library: IconLibrary = {
         family === 'duotone' ||
         // Sharp duotone
         family === 'sharp-duotone' ||
-        // Notdog duo-solid
+        // Notdog duo (correct usage: family="notdog-duo")
+        family === 'notdog-duo' ||
+        // NOTE: family="notdog" variant="duo-solid" is deprecated
         (family === 'notdog' && variant === 'duo-solid') ||
-        // Jelly duo-regular
+        // Jelly duo (correct usage: family="jelly-duo")
+        family === 'jelly-duo' ||
+        // NOTE: family="jelly" variant="duo-regular" is deprecated
         (family === 'jelly' && variant === 'duo-regular') ||
+        // Utility duo (correct usage: family="utility-duo")
+        family === 'utility-duo' ||
         // Thumbprint
         family === 'thumbprint'
       ) {