feat: FontAwesomeIcon stack example

src/components/FontAwesomeIcon/index.vue

@@ -11,44 +11,13 @@
    */
   import { FontAwesomeIconProps } from '@/components/FontAwesomeIcon/props';
   const props = defineProps(FontAwesomeIconProps);
-  defineExpose({ stack: props.stack });
-  const wrapClassObject = [
-    props.float ? `fa-pull-${props.float}` : '',
-    props.border ? 'fa-border' : '',
-    props.stack ? 'fa-stack' : '',
-    props.stackChild ? `fa-stack-${props.stackX}x` : '',
-    props.stackInverse ? 'fa-inverse' : '',
-  ];
-
-  const wrapStyleObject = Object.assign(
-    {
-      'background-color': props.bgColor,
-    },
-    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,
-        }
-      : {},
-  );
 
   const singleBeat = props.beat && !props.fade;
   const singleFade = !props.beat && props.fade;
   const BeatFade = props.beat && props.fade;
-
+  const wrapClassObject = [
-  const iconClassObject = [
+    props.float ? `fa-pull-${props.float}` : '',
-    `fa-${props.mode}`,
+    props.border ? 'fa-border' : '',
-    `fa-${props.name}`,
-    props.frameSize ? `fa-flip-${props.frameSize}` : '',
-    props.sharp ? 'fass' : '',
     props.rotate ? 'fa-rotate-by' : '',
     props.rotateFlip ? `fa-flip-${props.rotateFlip}` : '',
     singleBeat ? `fa-beat` : '',
@@ -60,11 +29,14 @@
     props.spin ? 'fa-spin' : '',
     props.spinReverse ? 'fa-spin-reverse' : '',
     props.spinPulse ? 'fa-spin-pulse' : '',
+    props.stack ? 'fa-stack' : '',
+    props.stackChild ? `fa-stack-${props.stackX}x` : '',
+    props.stackInverse ? 'fa-inverse' : '',
   ];
-  const iconStyleObject = Object.assign(
+
+  const wrapStyleObject = Object.assign(
     {
-      color: props.color,
+      'background-color': props.bgColor,
-      'font-size': props.size ? `${props.size}rpx` : false,
       '--fa-animation-duration': `${props.duration}s`,
     },
     props.rotate ? { '--fa-rotate-angle': `${props.rotate}deg` } : {},
@@ -100,7 +72,42 @@
           '--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 = [
+    `fa-${props.mode}`,
+    `fa-${props.name}`,
+    props.frameSize ? `fa-flip-${props.frameSize}` : '',
+    props.sharp ? 'fass' : '',
+  ];
+  const iconStyleObject = Object.assign({
+    color: props.color,
+    'font-size': props.size ? `${props.size}rpx` : false,
+  });
 </script>
 <template>
   <template v-if="props.stack">

src/components/FontAwesomeIcon/props.ts

@@ -6,6 +6,7 @@ export const FontAwesomeIconProps = {
    */
   name: {
     type: String,
+    default: 'default',
     required: true,
   },
   /** icon 风格
@@ -39,7 +40,6 @@ export const FontAwesomeIconProps = {
    */
   size: {
     type: [Number, String],
-    default: '',
   },
   /**
    * icon color
@@ -94,7 +94,7 @@ export const FontAwesomeIconProps = {
    */
   scale: {
     type: [Number, String],
-    default: 1.25,
+    default: '1.25',
   },
   /**
    * icon fade
@@ -110,7 +110,7 @@ export const FontAwesomeIconProps = {
    */
   opacity: {
     type: [Number, String],
-    default: 0.6,
+    default: '0.6',
   },
   /**
    * icon bounce
@@ -286,8 +286,8 @@ export const FontAwesomeIconProps = {
   },
   /** icon stackX
    * @description 堆叠层
-   * @example 1 底层 2 上层
+   * @example 1 (fa-stack-1x,以基本大小显示) 2(fa-stack-2x,以较大显示)
-   */
+   * */
   stackX: {
     type: [String, Number],
     default: 1,
@@ -310,4 +310,18 @@ export const FontAwesomeIconProps = {
     type: Boolean,
     default: false,
   },
+  /** icon stackZIndex
+   * @description 堆叠子元素 层级
+   */
+  stackZIndex: {
+    type: [String, Number],
+    default: 'auto',
+  },
+  /** icon stackChild
+   * @description 堆叠子元素图标反色
+   */
+  stackInverseColor: {
+    type: String,
+    default: '#fff',
+  },
 };

src/demo/example/fontAwesomeIcon/index.vue

@@ -116,16 +116,66 @@
       <FontAwesomeIcon name="arrow-left" float="left" />
     </view>
     <view style="clear: both">stack-堆叠</view>
-    <FontAwesomeIcon name="arrow-right" stack>
+    <FontAwesomeIcon stack>
       <template #default="slotProps">
-        <FontAwesomeIcon name="circle" :stackChild="slotProps.stack" stack-x="1" />
+        <FontAwesomeIcon name="circle" :stackChild="slotProps.stack" stack-x="2" />
-        <FontAwesomeIcon name="flag" :stackChild="slotProps.stack" stack-x="2" />
+        <FontAwesomeIcon name="flag" :stackChild="slotProps.stack" stackInverse stack-x="1" />
+      </template>
+    </FontAwesomeIcon>
+    <FontAwesomeIcon stack flip>
+      <template #default="slotProps">
+        <FontAwesomeIcon
+          mode="brands"
+          name="twitter"
+          :stackChild="slotProps.stack"
+          stackInverse
+          stackZIndex="2"
+          stack-x="1"
+        />
+        <FontAwesomeIcon name="square" :stackChild="slotProps.stack" stack-x="2" />
+      </template>
+    </FontAwesomeIcon>
+
+    <FontAwesomeIcon stack>
+      <template #default="slotProps">
+        <FontAwesomeIcon
+          mode="brands"
+          name="twitter"
+          :stackChild="slotProps.stack"
+          stackInverse
+          stackInverseColor="#1da1f2"
+          stackZIndex="2"
+          stack-x="1"
+        />
+        <FontAwesomeIcon name="square" :stackChild="slotProps.stack" stack-x="2" />
+      </template>
+    </FontAwesomeIcon>
+
+    <FontAwesomeIcon stack shake>
+      <template #default="slotProps">
+        <FontAwesomeIcon name="camera" :stackChild="slotProps.stack" stack-x="1" />
+        <FontAwesomeIcon
+          name="ban"
+          :stackChild="slotProps.stack"
+          stackInverseColor="Tomato"
+          stackInverse
+          stack-x="2"
+        />
+      </template>
+    </FontAwesomeIcon>
+    <FontAwesomeIcon stack rotate="45">
+      <template #default="slotProps">
+        <FontAwesomeIcon name="square" :stackChild="slotProps.stack" stack-x="2" />
+        <FontAwesomeIcon
+          name="terminal"
+          rotate="-45"
+          :stackChild="slotProps.stack"
+          stackInverseColor="Tomato"
+          stackInverse
+          stack-x="1"
+        />
       </template>
     </FontAwesomeIcon>
-    <span class="fa-stack">
-      <i class="fa-solid fa-circle fa-stack-2x"></i>
-      <i class="fa-solid fa-flag fa-stack-1x fa-inverse"></i>
-    </span>
   </AppProvider>
 </template>
 <style lang="scss" scoped></style>