wip-FontAwesomeIcon stack

src/components/FontAwesomeIcon/index.vue

@@ -1,4 +1,4 @@
-<script lang="ts" setup>
+<script lang="ts" setup name="FontAwesomeIcon">
   /**
    * 基于 Font Awesome Icon v6.2.0
    * solid 支持
@@ -10,17 +10,35 @@
    * duotone 支持
    */
   import { FontAwesomeIconProps } from '@/components/FontAwesomeIcon/props';
-  import { computed } from 'vue';
-
   const props = defineProps(FontAwesomeIconProps);
-  const wrapClassObject = [props.float ? `fa-pull-${props.float}` : ''];
+  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 = {
-    color: props.color,
-    'font-size': props.size ? `${props.size}rpx` : false,
-    'background-color': props.bgColor,
-    '--fa-pull-margin': props.float ? props.pullMargin : false,
-  };
+  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;
@@ -42,10 +60,11 @@
     props.spin ? 'fa-spin' : '',
     props.spinReverse ? 'fa-spin-reverse' : '',
     props.spinPulse ? 'fa-spin-pulse' : '',
-    props.border ? 'fa-border' : '',
   ];
   const iconStyleObject = Object.assign(
     {
+      color: props.color,
+      'font-size': props.size ? `${props.size}rpx` : false,
       '--fa-animation-duration': `${props.duration}s`,
     },
     props.rotate ? { '--fa-rotate-angle': `${props.rotate}deg` } : {},
@@ -81,21 +100,19 @@
           '--fa-animation-timing': props.spinTiming,
         }
       : {},
-    props.border
-      ? {
-          '--fa-border-color': props.borderConfig?.color || '#eee',
-          '--fa-border-padding': props.borderConfig?.padding || '.2em .25em .15em',
-          '--fa-border-radius': props.borderConfig?.radius || '.1em',
-          '--fa-border-style': props.borderConfig?.style || 'solid',
-          '--fa-border-width': props.borderConfig?.width || '.08em',
-        }
-      : {},
   );
 </script>
 <template>
-  <view class="icon-wrap" :class="wrapClassObject" :style="wrapStyleObject">
-    <text class="icon" :style="iconStyleObject" :class="iconClassObject" />
-  </view>
+  <template v-if="props.stack">
+    <view class="icon-wrap" :class="wrapClassObject" :style="wrapStyleObject">
+      <slot :stack="props.stack"></slot>
+    </view>
+  </template>
+  <template v-else>
+    <view class="icon-wrap" :class="wrapClassObject" :style="wrapStyleObject">
+      <text class="icon" :style="iconStyleObject" :class="iconClassObject" />
+    </view>
+  </template>
 </template>
 <style lang="scss" scoped>
   .icon-wrap {

src/components/FontAwesomeIcon/props.ts

@@ -38,7 +38,7 @@ export const FontAwesomeIconProps = {
    * @description 大小 单位 rpx
    */
   size: {
-    type: Number,
+    type: [Number, String],
     default: '',
   },
   /**
@@ -59,7 +59,7 @@ export const FontAwesomeIconProps = {
    * @description 旋转角度
    */
   rotate: {
-    type: Number,
+    type: [Number, String],
     default: 0,
   },
   /** icon rotateFlip
@@ -85,7 +85,7 @@ export const FontAwesomeIconProps = {
    * @description 动画持续时间(所有动画使用) s
    */
   duration: {
-    type: Number,
+    type: [Number, String],
     default: 1,
   },
   /**
@@ -93,7 +93,7 @@ export const FontAwesomeIconProps = {
    * @description 动画比例(跳动动画使用)
    */
   scale: {
-    type: Number,
+    type: [Number, String],
     default: 1.25,
   },
   /**
@@ -109,7 +109,7 @@ export const FontAwesomeIconProps = {
    * @description 透明度值 (淡入淡出动画使用)
    */
   opacity: {
-    type: Number,
+    type: [Number, String],
     default: 0.6,
   },
   /**
@@ -251,7 +251,7 @@ export const FontAwesomeIconProps = {
         // 设置边框颜色
         color: '#eee',
         // 设置图标周围的填充
-        padding: '.2em .25em .15em',
+        padding: '.04em .26em',
         // 设置边框半径
         radius: '.1em',
         // 设置边框样式
@@ -277,4 +277,37 @@ export const FontAwesomeIconProps = {
     type: String,
     default: '.3em',
   },
+  /** icon stack
+   * @description 堆叠
+   */
+  stack: {
+    type: Boolean,
+    default: false,
+  },
+  /** icon stackX
+   * @description 堆叠层
+   * @example 1 底层 2 上层
+   */
+  stackX: {
+    type: [String, Number],
+    default: 1,
+    validator(value: number) {
+      // The value must match one of these strings
+      return ['1', '2'].includes(value.toString());
+    },
+  },
+  /** icon stackInverse
+   * @description 堆叠 图标反色
+   */
+  stackInverse: {
+    type: Boolean,
+    default: false,
+  },
+  /** icon stackChild
+   * @description 堆叠子元素
+   */
+  stackChild: {
+    type: Boolean,
+    default: false,
+  },
 };

src/demo/example/fontAwesomeIcon/index.vue

@@ -115,6 +115,17 @@
       <FontAwesomeIcon name="arrow-right" float="right" />
       <FontAwesomeIcon name="arrow-left" float="left" />
     </view>
+    <view style="clear: both">stack-堆叠</view>
+    <FontAwesomeIcon name="arrow-right" stack>
+      <template #default="slotProps">
+        <FontAwesomeIcon name="circle" :stackChild="slotProps.stack" stack-x="1" />
+        <FontAwesomeIcon name="flag" :stackChild="slotProps.stack" stack-x="2" />
+      </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>