Add Transparency Slider for Duotone parts

StreamAwesome/src/components/settings/GeneralOptions.vue

@@ -33,6 +33,7 @@ function createFontAwesomeIconDisplayFromStyle(style: FontAwesomeStyle): FontAwe
       unicode: fallBackIcon.unicode,
       isBrandsIcon: fallBackIcon.isBrand(),
       family: fallBackIcon.styles.free[0].family,
+      duotoneAlpha: 0.5,
       style: style
     }
   } else {
@@ -41,8 +42,8 @@ function createFontAwesomeIconDisplayFromStyle(style: FontAwesomeStyle): FontAwe
     const unicode = props.icon.fontAwesomeIcon.unicode
     const isBrandsIcon = props.icon.fontAwesomeIcon.isBrandsIcon
     const family = props.icon.fontAwesomeIcon.family
-
-    return { id, label, unicode, isBrandsIcon, family, style }
+    const duotoneAlpha = props.icon.fontAwesomeIcon.duotoneAlpha
+    return { id, label, unicode, isBrandsIcon, family, style, duotoneAlpha }
   }
 }
 
@@ -55,6 +56,7 @@ function createFontAwesomeIconDisplayFromFamily(family: FontAwesomeFamily): Font
       unicode: fallBackIcon.unicode,
       isBrandsIcon: fallBackIcon.isBrand(),
       family: family,
+      duotoneAlpha: 0.5,
       style: fallBackIcon.styles.free[0].style
     }
   } else {
@@ -63,8 +65,8 @@ function createFontAwesomeIconDisplayFromFamily(family: FontAwesomeFamily): Font
     const unicode = props.icon.fontAwesomeIcon.unicode
     const isBrandsIcon = props.icon.fontAwesomeIcon.isBrandsIcon
     const style = props.icon.fontAwesomeIcon.style
-
-    return { id, label, unicode, isBrandsIcon, family, style }
+    const duotoneAlpha = props.icon.fontAwesomeIcon.duotoneAlpha
+    return { id, label, unicode, isBrandsIcon, family, style, duotoneAlpha }
   }
 }
 
@@ -80,6 +82,11 @@ function updateFamily(family: FontAwesomeFamily) {
 function updateStyle(style: FontAwesomeStyle) {
   currentIcon.fontAwesomeIcon.style = style
 }
+
+function updateAlpha(event: Event) {
+  const alpha = +(event.target as HTMLInputElement).value
+  currentIcon.fontAwesomeIcon.duotoneAlpha = alpha
+}
 </script>
 
 <template>
@@ -98,6 +105,24 @@ function updateStyle(style: FontAwesomeStyle) {
     />
   </div>
 
+  <div v-if="props.icon.fontAwesomeIcon.family.includes(DuotoneKeyword)">
+    <label
+      for="duotoneAlpha"
+      class="mb-[0.5] block text-sm font-medium text-gray-900 dark:text-white"
+      >Duotone Transparency:
+    </label>
+    <input
+      id="duotoneAlpha"
+      type="range"
+      :value="props.icon?.fontAwesomeIcon.duotoneAlpha ?? 0.5"
+      @input="(event) => updateAlpha(event)"
+      min="0"
+      max="1"
+      step="0.01"
+      class="mb-6 h-2 w-full cursor-pointer appearance-none rounded-lg bg-gray-200 focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500 dark:bg-gray-700"
+    />
+  </div>
+
   <section>
     <label class="block text-sm font-medium text-gray-900 dark:text-white">Font Family: </label>
     <div class="mt-1 flex rounded-md shadow-sm">

StreamAwesome/src/logic/generator/iconGenerator.ts

@@ -69,10 +69,12 @@ export default abstract class IconGenerator<T extends FontAwesomePreset> {
       icon.fontAwesomeIcon.family.includes(DuotoneKeyword) &&
       !icon.fontAwesomeIcon.isBrandsIcon
     ) {
-      this.renderingContext.fillStyle = this.getSecondaryFillStyle(icon)
+      this.renderingContext.fillStyle = this.getIconFillStyle(icon)
 
+      this.renderingContext.globalAlpha = icon.fontAwesomeIcon.duotoneAlpha
       const secondaryIconCode = this.calculateSecondaryIcon(icon.fontAwesomeIcon.unicode)
       this.renderingContext.fillText(secondaryIconCode, centerOfCanvas, centerOfCanvas)
+      this.renderingContext.globalAlpha = 1
     }
 
     this.renderingContext.fillStyle = this.getIconFillStyle(icon)

StreamAwesome/src/model/fontAwesomeIcon.ts

@@ -7,4 +7,5 @@ export interface FontAwesomeIcon {
   isBrandsIcon: boolean /* Only storing the brands information in the icon's style voids other styling information */
   style: FontAwesomeStyle
   family: FontAwesomeFamily
+  duotoneAlpha: number
 }

StreamAwesome/src/stores/icons.ts

@@ -22,7 +22,8 @@ export const useIconsStore = defineStore('icons', () => {
       label: 'Gear',
       isBrandsIcon: false,
       style: 'solid',
-      unicode: 'f013'
+      unicode: 'f013',
+      duotoneAlpha: 0.5
     }
   })