fix-FontAwesomeIcon 响应式和字体

src/components/FontAwesomeIcon/index.vue

@@ -10,131 +10,148 @@
    * duotone 支持
    */
   import { FontAwesomeIconProps } from '@/components/FontAwesomeIcon/props';
+  import { computed, ref } from 'vue';
   const props = defineProps(FontAwesomeIconProps);
 
   const emit = defineEmits<{
     (e: 'click'): void;
   }>();
 
-  const singleBeat = props.beat && !props.fade;
+  const singleBeat = ref(props.beat && !props.fade);
-  const singleFade = !props.beat && props.fade;
+  const singleFade = ref(!props.beat && props.fade);
-  const beatFade = props.beat && props.fade;
+  const beatFade = ref(props.beat && props.fade);
-  const count =
+  const count = computed(() => {
-    props.counter > props.counterMax ? `${props.counterMax}+` : props.counter;
+    return props.counter > props.counterMax
-  const wrapClassObject = [
+      ? `${props.counterMax}+`
-    props.float ? `fa-pull-${props.float}` : '',
+      : props.counter;
-    props.border ? 'fa-border' : '',
+  });
-    props.rotate ? 'fa-rotate-by' : '',
+  const wrapClassObject = computed(() => {
-    props.rotateFlip ? `fa-flip-${props.rotateFlip}` : '',
+    return [
-    singleBeat ? `fa-beat` : '',
+      props.float ? `fa-pull-${props.float}` : '',
-    singleFade ? `fa-fade` : '',
+      props.border ? 'fa-border' : '',
-    beatFade ? `fa-beat-fade` : '',
+      props.rotate ? 'fa-rotate-by' : '',
-    props.bounce ? 'fa-bounce' : '',
+      props.rotateFlip ? `fa-flip-${props.rotateFlip}` : '',
-    props.flip ? 'fa-flip' : '',
+      singleBeat.value ? `fa-beat` : '',
-    props.shake ? 'fa-shake' : '',
+      singleFade.value ? `fa-fade` : '',
-    props.spin ? 'fa-spin' : '',
+      beatFade.value ? `fa-beat-fade` : '',
-    props.spinReverse ? 'fa-spin-reverse' : '',
+      props.bounce ? 'fa-bounce' : '',
-    props.spinPulse ? 'fa-spin-pulse' : '',
+      props.flip ? 'fa-flip' : '',
-    props.stack ? 'fa-stack' : '',
+      props.shake ? 'fa-shake' : '',
-    props.stackChild ? `fa-stack-${props.stackX}x` : '',
+      props.spin ? 'fa-spin' : '',
-    props.stackInverse ? 'fa-inverse' : '',
+      props.spinReverse ? 'fa-spin-reverse' : '',
-    props.counter ? 'layers' : '',
+      props.spinPulse ? 'fa-spin-pulse' : '',
-  ];
+      props.stack ? 'fa-stack' : '',
+      props.stackChild ? `fa-stack-${props.stackX}x` : '',
+      props.stackInverse ? 'fa-inverse' : '',
+      props.counter ? 'layers' : '',
+    ];
+  });
+  const wrapStyleObject = computed(() => {
+    return Object.assign(
+      {
+        '--fa-animation-duration': `${props.duration}s`,
+      },
+      props.bgColor
+        ? {
+            'background-color': props.bgColor,
+          }
+        : {},
+      props.rotate ? { '--fa-rotate-angle': `${props.rotate}deg` } : {},
+      singleBeat.value ? { '--fa-beat-scale': `${props.scale}` } : {},
+      singleFade.value ? { '--fa-fade-opacity': `${props.opacity}` } : {},
+      beatFade.value
+        ? {
+            '--fa-beat-fade-scale': `${props.scale}`,
+            '--fa-beat-fade-opacity': `${props.opacity}`,
+          }
+        : {},
+      props.bounce
+        ? {
+            '--fa-bounce-rebound': props.bounceConfig?.rebound || '-0.125em',
+            '--fa-bounce-height': props.bounceConfig?.height || '-0.5em',
+            '--fa-bounce-start-scale-x':
+              props.bounceConfig?.startScaleX || '1.1',
+            '--fa-bounce-start-scale-y':
+              props.bounceConfig?.startScaleY || '0.9',
+            '--fa-bounce-jump-scale-x': props.bounceConfig?.jumpScaleX || '0.9',
+            '--fa-bounce-jump-scale-y': props.bounceConfig?.jumpScaleY || '1.1',
+            '--fa-bounce-land-scale-x':
+              props.bounceConfig?.landScaleX || '1.05',
+            '--fa-bounce-land-scale-y':
+              props.bounceConfig?.landScaleY || '0.95',
+          }
+        : {},
+      props.flip
+        ? {
+            '--fa-flip-x': props.flipConfig?.x || '0',
+            '--fa-flip-y': props.flipConfig?.y || '1',
+            '--fa-flip-z': props.flipConfig?.z || '0',
+            '--fa-flip-angle': props.flipConfig?.angle || '-180deg',
+          }
+        : {},
+      props.spin
+        ? {
+            '--fa-animation-delay': props.spinDelay,
+            '--fa-animation-iteration-count': props.spinIterationCount,
+            '--fa-animation-timing': props.spinTiming,
+          }
+        : {},
+      props.border
+        ? {
+            '--fa-border-color': props.borderConfig?.color || '#eee',
+            '--fa-border-padding': props.borderConfig?.padding || '.04em .26em',
+            '--fa-border-radius': props.borderConfig?.radius || '.1em',
+            '--fa-border-style': props.borderConfig?.style || 'solid',
+            '--fa-border-width': props.borderConfig?.width || '.08em',
+          }
+        : {},
+      props.float
+        ? {
+            '--fa-pull-margin': props.pullMargin,
+          }
+        : {},
+      props.stackChild
+        ? {
+            '--fa-stack-z-index': props.stackZIndex,
+          }
+        : {},
+      props.stackChild && props.stackInverse
+        ? {
+            '--fa-inverse': props.stackInverseColor,
+          }
+        : {},
+    );
+  });
 
-  const wrapStyleObject = Object.assign(
+  const iconClassObject = computed(() => {
-    {
+    return [
-      '--fa-animation-duration': `${props.duration}s`,
+      `fa-${props.mode}`,
-    },
+      `fa-${props.name}`,
-    props.bgColor
+      props.frameSize ? `fa-flip-${props.frameSize}` : '',
-      ? {
+      props.sharp ? 'fass' : '',
-          'background-color': props.bgColor,
+    ];
-        }
+  });
-      : {},
+  const iconStyleObject = computed(() => {
-    props.rotate ? { '--fa-rotate-angle': `${props.rotate}deg` } : {},
+    return Object.assign(
-    singleBeat ? { '--fa-beat-scale': `${props.scale}` } : {},
+      {},
-    singleFade ? { '--fa-fade-opacity': `${props.opacity}` } : {},
+      props.color
-    beatFade
+        ? {
-      ? {
+            color: props.color,
-          '--fa-beat-fade-scale': `${props.scale}`,
+          }
-          '--fa-beat-fade-opacity': `${props.opacity}`,
+        : {},
-        }
+      props.size
-      : {},
+        ? {
-    props.bounce
+            'font-size': `${props.size}rpx`,
-      ? {
+          }
-          '--fa-bounce-rebound': props.bounceConfig?.rebound || '-0.125em',
+        : {},
-          '--fa-bounce-height': props.bounceConfig?.height || '-0.5em',
+    );
-          '--fa-bounce-start-scale-x': props.bounceConfig?.startScaleX || '1.1',
+  });
-          '--fa-bounce-start-scale-y': props.bounceConfig?.startScaleY || '0.9',
-          '--fa-bounce-jump-scale-x': props.bounceConfig?.jumpScaleX || '0.9',
-          '--fa-bounce-jump-scale-y': props.bounceConfig?.jumpScaleY || '1.1',
-          '--fa-bounce-land-scale-x': props.bounceConfig?.landScaleX || '1.05',
-          '--fa-bounce-land-scale-y': props.bounceConfig?.landScaleY || '0.95',
-        }
-      : {},
-    props.flip
-      ? {
-          '--fa-flip-x': props.flipConfig?.x || '0',
-          '--fa-flip-y': props.flipConfig?.y || '1',
-          '--fa-flip-z': props.flipConfig?.z || '0',
-          '--fa-flip-angle': props.flipConfig?.angle || '-180deg',
-        }
-      : {},
-    props.spin
-      ? {
-          '--fa-animation-delay': props.spinDelay,
-          '--fa-animation-iteration-count': props.spinIterationCount,
-          '--fa-animation-timing': props.spinTiming,
-        }
-      : {},
-    props.border
-      ? {
-          '--fa-border-color': props.borderConfig?.color || '#eee',
-          '--fa-border-padding': props.borderConfig?.padding || '.04em .26em',
-          '--fa-border-radius': props.borderConfig?.radius || '.1em',
-          '--fa-border-style': props.borderConfig?.style || 'solid',
-          '--fa-border-width': props.borderConfig?.width || '.08em',
-        }
-      : {},
-    props.float
-      ? {
-          '--fa-pull-margin': props.pullMargin,
-        }
-      : {},
-    props.stackChild
-      ? {
-          '--fa-stack-z-index': props.stackZIndex,
-        }
-      : {},
-    props.stackChild && props.stackInverse
-      ? {
-          '--fa-inverse': props.stackInverseColor,
-        }
-      : {},
-  );
 
-  const iconClassObject = [
+  const counterStyleObject = computed(() => {
-    `fa-${props.mode}`,
+    return {
-    `fa-${props.name}`,
+      '--fa-counter-background-color': props.counterMgColor,
-    props.frameSize ? `fa-flip-${props.frameSize}` : '',
+    };
-    props.sharp ? 'fass' : '',
+  });
-  ];
-  const iconStyleObject = Object.assign(
-    {},
-    props.color
-      ? {
-          color: props.color,
-        }
-      : {},
-    props.size
-      ? {
-          'font-size': `${props.size}rpx`,
-        }
-      : {},
-  );
-
-  const counterStyleObject = {
-    '--fa-counter-background-color': props.counterMgColor,
-  };
 
   const onClick = () => {
     emit('click');

src/components/FontAwesomeIcon/props.ts

@@ -66,17 +66,20 @@ export const FontAwesomeIconProps = {
    * @description 旋转角度
    */
   rotate: {
-    type: [Number, String],
+    type: [Number, String, Boolean],
-    default: 0,
+    default: false,
   },
   /** icon rotateFlip
    * @description 旋转-翻转
    */
   rotateFlip: {
-    type: String,
+    type: [String, Boolean],
+    default: false,
     validator(value: string) {
       // The value must match one of these strings
-      return ['horizontal', 'vertical', 'both'].includes(value);
+      return ['horizontal', 'vertical', 'both', 'inherit', false].includes(
+        value,
+      );
     },
   },
   /**