feat: FontAwesomeIcon counter

src/components/FontAwesomeIcon/index.vue

@@ -18,7 +18,8 @@
 
   const singleBeat = props.beat && !props.fade;
   const singleFade = !props.beat && props.fade;
-  const BeatFade = props.beat && props.fade;
+  const beatFade = props.beat && props.fade;
+  const count = props.counter > props.counterMax ? `${props.counterMax}+` : props.counter;
   const wrapClassObject = [
     props.float ? `fa-pull-${props.float}` : '',
     props.border ? 'fa-border' : '',
@@ -26,7 +27,7 @@
     props.rotateFlip ? `fa-flip-${props.rotateFlip}` : '',
     singleBeat ? `fa-beat` : '',
     singleFade ? `fa-fade` : '',
-    BeatFade ? `fa-beat-fade` : '',
+    beatFade ? `fa-beat-fade` : '',
     props.bounce ? 'fa-bounce' : '',
     props.flip ? 'fa-flip' : '',
     props.shake ? 'fa-shake' : '',
@@ -36,6 +37,7 @@
     props.stack ? 'fa-stack' : '',
     props.stackChild ? `fa-stack-${props.stackX}x` : '',
     props.stackInverse ? 'fa-inverse' : '',
+    props.counter ? 'layers' : '',
   ];
 
   const wrapStyleObject = Object.assign(
@@ -46,7 +48,7 @@
     props.rotate ? { '--fa-rotate-angle': `${props.rotate}deg` } : {},
     singleBeat ? { '--fa-beat-scale': `${props.scale}` } : {},
     singleFade ? { '--fa-fade-opacity': `${props.opacity}` } : {},
-    BeatFade
+    beatFade
       ? { '--fa-beat-fade-scale': `${props.scale}`, '--fa-beat-fade-opacity': `${props.opacity}` }
       : {},
     props.bounce
@@ -113,6 +115,10 @@
     'font-size': props.size ? `${props.size}rpx` : false,
   });
 
+  const counterStyleObject = {
+    '--fa-counter-background-color': props.counterMgColor,
+  };
+
   const onClick = () => {
     emit('click');
   };
@@ -121,20 +127,46 @@
   <template v-if="props.stack">
     <view @click="onClick" class="icon-wrap" :class="wrapClassObject" :style="wrapStyleObject">
       <slot :stack="props.stack"></slot>
+      <text v-if="props.counter" class="counter" :style="counterStyleObject">{{ count }}</text>
     </view>
   </template>
   <template v-else>
     <view @click="onClick" class="icon-wrap" :class="wrapClassObject" :style="wrapStyleObject">
       <text class="icon" :style="iconStyleObject" :class="iconClassObject" />
+      <text v-if="props.counter" class="counter" :style="counterStyleObject">{{ count }}</text>
     </view>
   </template>
 </template>
 <style lang="scss" scoped>
   .icon-wrap {
     display: inline-block;
+    &.layers {
+      position: relative;
+      text-align: center;
+    }
     .icon {
       display: inline-block;
       color: inherit;
     }
+    .counter {
+      display: inline-block;
+      background-color: var(--fa-counter-background-color, #ff253a);
+      border-radius: 1em;
+      box-sizing: border-box;
+      color: #fff;
+      line-height: 1;
+      max-width: 5em;
+      min-width: 1.5em;
+      overflow: hidden;
+      padding: 0.25em 0.5em;
+      position: absolute;
+      right: -0.35em;
+      text-overflow: ellipsis;
+      top: 0;
+      -webkit-transform: 0.35;
+      transform: scale(0.35);
+      -webkit-transform-origin: top right;
+      transform-origin: top right;
+    }
   }
 </style>

src/components/FontAwesomeIcon/props.ts

@@ -324,4 +324,25 @@ export const FontAwesomeIconProps = {
     type: String,
     default: '#fff',
   },
+  /** icon counter
+   * @description 角标计数
+   */
+  counter: {
+    type: [String, Number, Boolean],
+    default: false,
+  },
+  /** icon counterMax
+   * @description 角标计数最大值
+   */
+  counterMax: {
+    type: Number,
+    default: 99,
+  },
+  /** icon counterMax
+   * @description 角标计数背景色
+   */
+  counterMgColor: {
+    type: String,
+    default: '#ff253a',
+  },
 };

src/demo/example/fontAwesomeIcon/index.vue

@@ -5,13 +5,13 @@
 <template>
   <AppProvider>
     <view>mode-不同风格</view>
-    <view> <FontAwesomeIcon name="house" />solid </view>
+    <view> <FontAwesomeIcon name="house" counter="999" />solid </view>
     <view> <FontAwesomeIcon mode="regular" name="house" />regular</view>
     <view> <FontAwesomeIcon mode="light" name="house" />light</view>
     <view> <FontAwesomeIcon mode="thin" name="house" />thin</view>
     <view> <FontAwesomeIcon mode="duotone" name="house" />duotone</view>
     <view>sharp-直角图标</view>
-    <view> <FontAwesomeIcon name="user" sharp /> sharp </view>
+    <view> <FontAwesomeIcon name="user" sharp counter="999" /> sharp </view>
 
     <view>mode(brands)-品牌logo</view>
     <view> <FontAwesomeIcon mode="brands" name="bilibili" /> bilibili </view>
@@ -136,7 +136,7 @@
       </template>
     </FontAwesomeIcon>
 
-    <FontAwesomeIcon stack>
+    <FontAwesomeIcon stack counter="999">
       <template #default="slotProps">
         <FontAwesomeIcon
           mode="brands"