fix-FontAwesomeIcon 响应式和字体

src/components/FontAwesomeIcon/index.vue

@@ -10,25 +10,30 @@
    * 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.counter;
+  });
+  const wrapClassObject = computed(() => {
+    return [
       props.float ? `fa-pull-${props.float}` : '',
       props.border ? 'fa-border' : '',
       props.rotate ? 'fa-rotate-by' : '',
       props.rotateFlip ? `fa-flip-${props.rotateFlip}` : '',
-    singleBeat ? `fa-beat` : '',
+      singleBeat.value ? `fa-beat` : '',
-    singleFade ? `fa-fade` : '',
+      singleFade.value ? `fa-fade` : '',
-    beatFade ? `fa-beat-fade` : '',
+      beatFade.value ? `fa-beat-fade` : '',
       props.bounce ? 'fa-bounce' : '',
       props.flip ? 'fa-flip' : '',
       props.shake ? 'fa-shake' : '',
@@ -40,8 +45,9 @@
       props.stackInverse ? 'fa-inverse' : '',
       props.counter ? 'layers' : '',
     ];
-
+  });
-  const wrapStyleObject = Object.assign(
+  const wrapStyleObject = computed(() => {
+    return Object.assign(
       {
         '--fa-animation-duration': `${props.duration}s`,
       },
@@ -51,9 +57,9 @@
           }
         : {},
       props.rotate ? { '--fa-rotate-angle': `${props.rotate}deg` } : {},
-    singleBeat ? { '--fa-beat-scale': `${props.scale}` } : {},
+      singleBeat.value ? { '--fa-beat-scale': `${props.scale}` } : {},
-    singleFade ? { '--fa-fade-opacity': `${props.opacity}` } : {},
+      singleFade.value ? { '--fa-fade-opacity': `${props.opacity}` } : {},
-    beatFade
+      beatFade.value
         ? {
             '--fa-beat-fade-scale': `${props.scale}`,
             '--fa-beat-fade-opacity': `${props.opacity}`,
@@ -63,12 +69,16 @@
         ? {
             '--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-x':
-          '--fa-bounce-start-scale-y': props.bounceConfig?.startScaleY || '0.9',
+              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-x':
-          '--fa-bounce-land-scale-y': props.bounceConfig?.landScaleY || '0.95',
+              props.bounceConfig?.landScaleX || '1.05',
+            '--fa-bounce-land-scale-y':
+              props.bounceConfig?.landScaleY || '0.95',
           }
         : {},
       props.flip
@@ -111,14 +121,18 @@
           }
         : {},
     );
+  });
 
-  const iconClassObject = [
+  const iconClassObject = computed(() => {
+    return [
       `fa-${props.mode}`,
       `fa-${props.name}`,
       props.frameSize ? `fa-flip-${props.frameSize}` : '',
       props.sharp ? 'fass' : '',
     ];
-  const iconStyleObject = Object.assign(
+  });
+  const iconStyleObject = computed(() => {
+    return Object.assign(
       {},
       props.color
         ? {
@@ -131,10 +145,13 @@
           }
         : {},
     );
+  });
 
-  const counterStyleObject = {
+  const counterStyleObject = computed(() => {
+    return {
       '--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,
+      );
     },
   },
   /**