wip-FontAwesomeIcon shake

src/components/FontAwesomeIcon/index.vue

@@ -16,7 +16,7 @@
 
   const wrapStyleObject = {
     color: props.color,
-    'font-size': `${props.size}rpx`,
+    'font-size': props.size ? `${props.size}rpx` : false,
     'background-color': props.bgColor,
     'fa-border': props.border,
   };
@@ -31,12 +31,13 @@
     props.frameSize ? `fa-flip-${props.frameSize}` : '',
     props.sharp ? 'fass' : '',
     props.rotate ? 'fa-rotate-by' : '',
-    props.reverse ? `fa-flip-${props.reverse}` : '',
+    props.rotateFlip ? `fa-flip-${props.rotateFlip}` : '',
     singleBeat ? `fa-beat` : '',
     singleFade ? `fa-fade` : '',
     BeatFade ? `fa-beat-fade` : '',
     props.bounce ? 'fa-bounce' : '',
     props.flip ? 'fa-flip' : '',
+    props.shake ? 'fa-shake' : '',
   ];
   const iconStyleObject = Object.assign(
     {
@@ -80,6 +81,7 @@
     display: inline-block;
     .icon {
       display: inline-block;
+      color: inherit;
     }
   }
 </style>

src/components/FontAwesomeIcon/props.ts

@@ -39,6 +39,7 @@ export const FontAwesomeIconProps = {
    */
   size: {
     type: Number,
+    default: '',
   },
   /**
    * icon color
@@ -68,10 +69,10 @@ export const FontAwesomeIconProps = {
     type: Number,
     default: 0,
   },
-  /** icon reverse
+  /** icon rotateFlip
-   * @description 对称翻转
+   * @description 旋转-翻转
    */
-  reverse: {
+  rotateFlip: {
     type: String,
     validator(value: string) {
       // The value must match one of these strings
@@ -140,17 +141,17 @@ export const FontAwesomeIconProps = {
         rebound: '-0.125em',
         // 设置图标弹跳时跳到的最大高度
         height: '-0.5em',
-        // 设置图标开始反弹时的水平失真（“挤压”）
+        // 设置图标开始反弹时的水平挤压
         startScaleX: '1.1',
-        // 将图标的水平失真（“挤压”）设置在跳转的顶部
+        // 设置图标开始反弹时的垂直挤压
         startScaleY: '0.9',
-        // 将图标的水平失真（“挤压”）设置在跳转的顶部
+        // 设置图标弹跳时的水平挤压
         jumpScaleX: '0.9',
-        // 将图标的垂直失真（“挤压”）设置在跳转的顶部
+        // 设置图标弹跳时的垂直挤压
         jumpScaleY: '1.1',
-        // 设置跳跃后着陆时图标的水平失真（“挤压”）
+        // 设置图标弹跳后着陆时的水平挤压
         landScaleX: '1.05',
-        // 设置跳跃后着陆时图标的垂直失真（“挤压”）
+        // 设置图标弹跳后着陆时的垂直挤压
         landScaleY: '0.95',
       };
     },
@@ -171,15 +172,23 @@ export const FontAwesomeIconProps = {
     type: Object,
     default: () => {
       return {
-        // 设置表示旋转轴的矢量的 x 坐标（0~1）
+        // 设置旋转轴的 x 坐标（0~1）
         x: '0',
-        // 设置矢量的 y 坐标，表示旋转轴（0~1)
+        // 设置旋转轴的 y 坐标（0~1)
         y: '1',
-        // 设置矢量的 z 坐标，表示旋转轴（0~1)
+        // 设置旋转轴的 z 坐标（0~1)
         z: '0',
-        // 设置翻转的旋转角度。正角表示顺时针旋转，负角表示逆时针旋转。
+        // 设置翻转的旋转角度,正角表示顺时针旋转，负角表示逆时针旋转。
         angle: '-180deg',
       };
     },
   },
+  /**
+   * icon shake
+   * @description 抖动动画
+   */
+  shake: {
+    type: Boolean,
+    default: false,
+  },
 };

src/demo/example/fontAwesomeIcon/index.vue

@@ -33,16 +33,17 @@
     <view>rotate-旋转角度</view>
     <view> <FontAwesomeIcon mode="duotone" name="house" rotate="63" />duotone 63</view>
     <view> <FontAwesomeIcon mode="duotone" name="snowboarding" rotate="58" />duotone 58</view>
-    <view>reverse-对称翻转</view>
+    <view>rotateFlip-旋转-翻转</view>
     <view> <FontAwesomeIcon mode="duotone" name="snowboarding" />duotone 正常</view>
     <view>
-      <FontAwesomeIcon mode="duotone" name="snowboarding" reverse="horizontal" />duotone 水平翻转
+      <FontAwesomeIcon mode="duotone" name="snowboarding" rotate-flip="horizontal" />
+      duotone 水平翻转
     </view>
     <view>
-      <FontAwesomeIcon mode="duotone" name="snowboarding" reverse="vertical" />duotone 垂直翻转
+      <FontAwesomeIcon mode="duotone" name="snowboarding" rotate-flip="vertical" />duotone 垂直翻转
     </view>
     <view>
-      <FontAwesomeIcon mode="duotone" name="snowboarding" reverse="both" />duotone 垂直水平翻转
+      <FontAwesomeIcon mode="duotone" name="snowboarding" rotate-flip="both" />duotone 垂直水平翻转
     </view>
     <view>beat-缩放动画</view>
     <FontAwesomeIcon name="circle-plus" beat />
@@ -87,6 +88,11 @@
       }"
     />
     <FontAwesomeIcon name="money-check-dollar" flip duration="3" />
+
+    <view>shake-抖动动画</view>
+    <FontAwesomeIcon name="bell" shake />
+    <FontAwesomeIcon name="stopwatch" shake />
+    <FontAwesomeIcon name="bomb" shake />
   </AppProvider>
 </template>
 <style lang="scss" scoped></style>