wip-FontAwesomeIcon border

src/components/FontAwesomeIcon/index.vue

@@ -13,12 +13,13 @@
   import { computed } from 'vue';
 
   const props = defineProps(FontAwesomeIconProps);
+  const wrapClassObject = [props.float ? `fa-pull-${props.float}` : ''];
 
   const wrapStyleObject = {
     color: props.color,
     'font-size': props.size ? `${props.size}rpx` : false,
     'background-color': props.bgColor,
-    'fa-border': props.border,
+    '--fa-pull-margin': props.float ? props.pullMargin : false,
   };
 
   const singleBeat = props.beat && !props.fade;
@@ -41,6 +42,7 @@
     props.spin ? 'fa-spin' : '',
     props.spinReverse ? 'fa-spin-reverse' : '',
     props.spinPulse ? 'fa-spin-pulse' : '',
+    props.border ? 'fa-border' : '',
   ];
   const iconStyleObject = Object.assign(
     {
@@ -79,10 +81,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" :style="wrapStyleObject">
+  <view class="icon-wrap" :class="wrapClassObject" :style="wrapStyleObject">
     <text class="icon" :style="iconStyleObject" :class="iconClassObject" />
   </view>
 </template>

src/components/FontAwesomeIcon/props.ts

@@ -55,13 +55,6 @@ export const FontAwesomeIconProps = {
   bgColor: {
     type: String,
   },
-  /** icon border
-   * @description 边框
-   */
-  border: {
-    type: Boolean,
-    default: false,
-  },
   /** icon rotate
    * @description 旋转角度
    */
@@ -82,8 +75,6 @@ export const FontAwesomeIconProps = {
   /**
    * icon beat
    * @description 缩放动画
-   * @param duration Number 时间 s
-   * @param scale Number 比例
    */
   beat: {
     type: Boolean,
@@ -242,4 +233,48 @@ export const FontAwesomeIconProps = {
     type: String,
     default: 'linear',
   },
+  /** icon border
+   * @description 边框
+   */
+  border: {
+    type: Boolean,
+    default: false,
+  },
+  /**
+   * icon borderConfig
+   * @description 翻转动画属性设置
+   */
+  borderConfig: {
+    type: Object,
+    default: () => {
+      return {
+        // 设置边框颜色
+        color: '#eee',
+        // 设置图标周围的填充
+        padding: '.2em .25em .15em',
+        // 设置边框半径
+        radius: '.1em',
+        // 设置边框样式
+        // 可选值 solid(默认实线), dotted(点状边框),dashed(虚线),double(双线)
+        style: 'solid',
+        // 设置边框宽度
+        width: '.08em',
+      };
+    },
+  },
+  /**
+   * icon float
+   * @description 浮动定位
+   * @example:  left ,right
+   */
+  float: {
+    type: String,
+  },
+  /** icon pullMargin
+   * @description 设置图标周围的边距
+   */
+  pullMargin: {
+    type: String,
+    default: '.3em',
+  },
 };

src/demo/example/fontAwesomeIcon/index.vue

@@ -107,6 +107,14 @@
       spinIterationCount="3"
       duration="2"
     />
+    <view>border-边框</view>
+    <FontAwesomeIcon name="arrow-right" border />
+    <FontAwesomeIcon name="arrow-right" border :borderConfig="{ color: '#000' }" />
+    <view>float-浮动定位</view>
+    <view>
+      <FontAwesomeIcon name="arrow-right" float="right" />
+      <FontAwesomeIcon name="arrow-left" float="left" />
+    </view>
   </AppProvider>
 </template>
 <style lang="scss" scoped></style>