wip-FontAwesomeIcon check

README.md

@@ -125,14 +125,14 @@ pnpm install
 - 运行
 
 ```bash
-# 其他端请查看 webpage.json script
+# 其他端请查看 package.json script
 pnpm dev:h5
 ```
 
 - 打包
 
 ```bash
-# 其他端请查看 webpage.json script
+# 其他端请查看 package.json script
 pnpm build:h5
 ```
 

package.json

@@ -35,19 +35,19 @@
     "prepare": "husky install"
   },
   "dependencies": {
-    "@dcloudio/uni-app": "^3.0.0-alpha-3060420220922006",
+    "@dcloudio/uni-app": "^3.0.0-alpha-3060420220922008",
-    "@dcloudio/uni-app-plus": "^3.0.0-alpha-3060420220922006",
+    "@dcloudio/uni-app-plus": "^3.0.0-alpha-3060420220922008",
-    "@dcloudio/uni-components": "^3.0.0-alpha-3060420220922006",
+    "@dcloudio/uni-components": "^3.0.0-alpha-3060420220922008",
-    "@dcloudio/uni-h5": "^3.0.0-alpha-3060420220922006",
+    "@dcloudio/uni-h5": "^3.0.0-alpha-3060420220922008",
-    "@dcloudio/uni-i18n": "^3.0.0-alpha-3060420220922006",
+    "@dcloudio/uni-i18n": "^3.0.0-alpha-3060420220922008",
-    "@dcloudio/uni-mp-alipay": "^3.0.0-alpha-3060420220922006",
+    "@dcloudio/uni-mp-alipay": "^3.0.0-alpha-3060420220922008",
-    "@dcloudio/uni-mp-baidu": "^3.0.0-alpha-3060420220922006",
+    "@dcloudio/uni-mp-baidu": "^3.0.0-alpha-3060420220922008",
-    "@dcloudio/uni-mp-kuaishou": "^3.0.0-alpha-3060420220922006",
+    "@dcloudio/uni-mp-kuaishou": "^3.0.0-alpha-3060420220922008",
-    "@dcloudio/uni-mp-lark": "^3.0.0-alpha-3060420220922006",
+    "@dcloudio/uni-mp-lark": "^3.0.0-alpha-3060420220922008",
-    "@dcloudio/uni-mp-qq": "^3.0.0-alpha-3060420220922006",
+    "@dcloudio/uni-mp-qq": "^3.0.0-alpha-3060420220922008",
-    "@dcloudio/uni-mp-toutiao": "^3.0.0-alpha-3060420220922006",
+    "@dcloudio/uni-mp-toutiao": "^3.0.0-alpha-3060420220922008",
-    "@dcloudio/uni-mp-weixin": "^3.0.0-alpha-3060420220922006",
+    "@dcloudio/uni-mp-weixin": "^3.0.0-alpha-3060420220922008",
-    "@dcloudio/uni-quickapp-webview": "^3.0.0-alpha-3060420220922006",
+    "@dcloudio/uni-quickapp-webview": "^3.0.0-alpha-3060420220922008",
     "@fortawesome/fontawesome-free": "^6.2.0",
     "crypto-js": "^4.1.1",
     "echarts": "^5.4.0",
@@ -60,15 +60,15 @@
   },
   "devDependencies": {
     "@dcloudio/types": "^2.6.12",
-    "@dcloudio/uni-automator": "^3.0.0-alpha-3060420220922006",
+    "@dcloudio/uni-automator": "^3.0.0-alpha-3060420220922008",
-    "@dcloudio/uni-cli-shared": "^3.0.0-alpha-3060420220922006",
+    "@dcloudio/uni-cli-shared": "^3.0.0-alpha-3060420220922008",
-    "@dcloudio/vite-plugin-uni": "^3.0.0-alpha-3060420220922006",
+    "@dcloudio/vite-plugin-uni": "^3.0.0-alpha-3060420220922008",
     "@types/crypto-js": "^4.1.1",
     "@types/lodash-es": "^4.17.6",
     "@types/node": "^17.0.45",
     "@types/qs": "^6.9.7",
-    "@typescript-eslint/eslint-plugin": "^5.39.0",
+    "@typescript-eslint/eslint-plugin": "^5.40.0",
-    "@typescript-eslint/parser": "^5.39.0",
+    "@typescript-eslint/parser": "^5.40.0",
     "autoprefixer": "^10.4.12",
     "eslint": "^8.25.0",
     "eslint-config-prettier": "^8.5.0",
@@ -82,7 +82,7 @@
     "sass": "^1.55.0",
     "typescript": "^4.8.4",
     "unplugin-vue-components": "^0.22.8",
-    "vite": "^3.1.6",
+    "vite": "^3.1.7",
     "vite-plugin-eslint": "^1.8.1"
   },
   "husky": {

src/components/Test/index.vue

@@ -0,0 +1,14 @@
+<script lang="ts" setup>
+  const props = defineProps({
+    text: {
+      type: String,
+      default: 'text',
+    },
+  });
+
+  const text = 'TEXT: ' + props.text;
+</script>
+<template>
+  <view>{{ text }}</view>
+</template>
+<style lang="scss" scoped></style>

src/demo/example/fontAwesomeIcon/check.vue

@@ -0,0 +1,328 @@
+<script lang="ts" setup>
+  import AppProvider from '@/components/AppProvider/inedx.vue';
+  import FontAwesomeIcon from '@/components/FontAwesomeIcon/index.vue';
+  import Test from '@/components/Test/index.vue';
+  import { reactive, ref } from 'vue';
+
+  const iconName = ref('house');
+
+  const modeList = ['solid', 'regular', 'light', 'thin', 'duotone', 'brands'];
+
+  const colors = [
+    {
+      color: '#000000',
+      name: '黑色',
+    },
+    {
+      color: '#FFFFFF',
+      name: '白色',
+    },
+    {
+      color: '#0000FF',
+      name: '蓝色',
+    },
+    {
+      color: '#008080',
+      name: '蓝绿色',
+    },
+    {
+      color: '#FF0000',
+      name: '红色',
+    },
+    {
+      color: '#00FF00',
+      name: '绿色',
+    },
+    {
+      color: '#FFFF00',
+      name: '黄色',
+    },
+  ];
+
+  const sizes = ['24', '44', '64', '88'];
+  const rotates = [false, '45', '20', '69', '90', '180', '270', '288'];
+  const rotateFlips = [
+    {
+      value: false,
+      name: '正常',
+    },
+    {
+      value: 'horizontal',
+      name: '水平翻转',
+    },
+    {
+      value: 'vertical',
+      name: '垂直翻转',
+    },
+    {
+      value: 'both',
+      name: '垂直水平翻转',
+    },
+  ];
+  const animations = [
+    {
+      value: 'beat',
+      name: '缩放',
+    },
+    {
+      value: 'fade',
+      name: '淡入淡出',
+    },
+    {
+      value: 'bounce',
+      name: '弹跳',
+    },
+    {
+      value: 'flip',
+      name: '翻转',
+    },
+    {
+      value: 'shake',
+      name: '抖动',
+    },
+    {
+      value: 'spin',
+      name: '旋转',
+    },
+  ];
+
+  const attribute = reactive({
+    mode: 'solid',
+    sharp: false,
+    color: '#000000',
+    size: '',
+    rotate: false,
+    rotateFlip: false,
+    beat: false,
+    fade: false,
+    bounce: false,
+    flip: false,
+    shake: false,
+    spin: false,
+  });
+
+  const setAttribute = (e: any) => {
+    console.log(e);
+    const key = e.currentTarget.dataset.k;
+    const value = e.currentTarget.dataset.v;
+    const replaces = ['mode', 'color', 'size', 'rotate', 'rotateFlip'];
+    if (key in attribute) {
+      if (replaces.includes(key)) {
+        // @ts-ignore
+        attribute[key] = value;
+        if (key == 'mode') attribute.sharp = false;
+        if (key == 'rotate') attribute.rotateFlip = false;
+        if (key == 'rotateFlip') attribute.rotate = false;
+        return;
+      }
+      // @ts-ignore
+      attribute[key] = !attribute[key];
+      if (key == 'sharp' && attribute.sharp) {
+        attribute.mode = 'solid';
+      }
+    }
+  };
+</script>
+<template>
+  <AppProvider>
+    <view class="title">Icon Check</view>
+    <FontAwesomeIcon
+      :name="iconName"
+      :mode="attribute.mode"
+      :sharp="attribute.sharp"
+      :color="attribute.color"
+      :size="attribute.size"
+      :rotate="attribute.rotate"
+      :rotate-flip="attribute.rotateFlip"
+    />
+    <Test :text="attribute.mode" />
+    <view class="check-wrap">
+      <view class="input-wrap">
+        <input placeholder="Icon Name" v-model.trim.lazy="iconName" />
+      </view>
+      <view class="icon-wrap">
+        <FontAwesomeIcon name="circle-exclamation-check" />
+      </view>
+    </view>
+    <view class="attribute-wrap">
+      <view class="mode">
+        <view>风格(mode): </view>
+        <view class="attribute-list">
+          <template v-for="(mode, index) in modeList" :key="index">
+            <view
+              class="attribute-item"
+              @click="setAttribute"
+              data-k="mode"
+              :data-v="mode"
+            >
+              <FontAwesomeIcon
+                mode="regular"
+                :name="attribute.mode == mode ? 'circle-dot' : 'circle'"
+              /><text>{{ mode }}</text>
+            </view>
+          </template>
+          <view
+            class="attribute-item"
+            style="width: 50%"
+            @click="setAttribute"
+            data-k="sharp"
+          >
+            <FontAwesomeIcon
+              :mode="attribute.sharp ? 'solid' : 'regular'"
+              :name="attribute.sharp ? 'square-check' : 'square'"
+            /><text>直角(sharp)</text>
+          </view>
+        </view>
+      </view>
+      <view class="color">
+        <view>颜色(color): </view>
+        <view class="attribute-list">
+          <template v-for="(item, index) in colors" :key="index">
+            <view
+              class="attribute-item"
+              @click="setAttribute"
+              data-k="color"
+              :data-v="item.color"
+            >
+              <FontAwesomeIcon
+                mode="regular"
+                :name="attribute.color == item.color ? 'circle-dot' : 'circle'"
+              /><text>{{ item.name }}</text>
+            </view>
+          </template>
+        </view>
+      </view>
+      <view class="size">
+        <view>大小(size)[rpx]: </view>
+        <view class="attribute-list">
+          <template v-for="(item, index) in sizes" :key="index">
+            <view
+              class="attribute-item"
+              @click="setAttribute"
+              data-k="size"
+              :data-v="item"
+            >
+              <FontAwesomeIcon
+                mode="regular"
+                :name="attribute.size == item ? 'circle-dot' : 'circle'"
+              /><text>{{ item }}rpx</text>
+            </view>
+          </template>
+        </view>
+      </view>
+      <view class="rotate">
+        <view>旋转角度(rotate)[deg]: </view>
+        <view class="attribute-list">
+          <template v-for="(item, index) in rotates" :key="index">
+            <view
+              class="attribute-item"
+              @click="setAttribute"
+              data-k="rotate"
+              :data-v="item"
+            >
+              <FontAwesomeIcon
+                mode="regular"
+                :name="attribute.rotate == item ? 'circle-dot' : 'circle'"
+              /><text>{{ index != 0 ? item + 'deg' : '正常' }}</text>
+            </view>
+          </template>
+        </view>
+      </view>
+      <view class="color">
+        <view>翻转(rotateFlip): </view>
+        <view class="attribute-list">
+          <template v-for="(item, index) in rotateFlips" :key="index">
+            <view
+              class="attribute-item"
+              style="width: 50%"
+              @click="setAttribute"
+              data-k="rotateFlip"
+              :data-v="item.value"
+            >
+              <FontAwesomeIcon
+                mode="regular"
+                :name="
+                  attribute.rotateFlip == item.value ? 'circle-dot' : 'circle'
+                "
+              /><text>{{ item.name }}</text>
+            </view>
+          </template>
+        </view>
+      </view>
+      <view class="animation">
+        <view>动画: </view>
+        <view class="attribute-list">
+          <view
+            class="attribute-item"
+            style="width: 50%"
+            @click="setAttribute"
+            data-k="sharp"
+          >
+            <FontAwesomeIcon
+              :mode="attribute.sharp ? 'solid' : 'regular'"
+              :name="attribute.sharp ? 'square-check' : 'square'"
+            /><text>直角(sharp)</text>
+          </view>
+          <template v-for="(item, index) in animations" :key="index">
+            <view
+              class="attribute-item"
+              style="width: 50%"
+              @click="setAttribute"
+              :data-k="item.value"
+            >
+              <FontAwesomeIcon
+                :mode="attribute[item.value] ? 'solid' : 'regular'"
+                :name="attribute[item.value] ? 'square-check' : 'square'"
+              /><text>{{ item.name }}</text>
+            </view>
+          </template>
+        </view>
+      </view>
+    </view>
+  </AppProvider>
+</template>
+<style lang="scss" scoped>
+  .title {
+    margin: 60rpx 0 36rpx 0;
+    text-align: center;
+    font-size: 32rpx;
+    font-weight: 600;
+  }
+  .check-wrap {
+    background-color: #ffffff;
+    height: 88rpx;
+    border-radius: 88rpx;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0 36rpx;
+    .input-wrap {
+      flex-grow: 1;
+      input {
+        height: 64rpx;
+      }
+    }
+    .icon-wrap {
+      width: 64rpx;
+      text-align: right;
+      font-size: 40rpx;
+    }
+  }
+  .attribute-wrap {
+    margin-top: 24rpx;
+    .attribute-list {
+      display: flex;
+      flex-wrap: wrap;
+      .attribute-item {
+        width: 30%;
+        height: 56rpx;
+        padding-left: 32rpx;
+        text {
+          margin-left: 10rpx;
+        }
+      }
+      .mode {
+      }
+    }
+  }
+</style>

src/demo/example/fontAwesomeIcon/index.vue

@@ -3,35 +3,49 @@
   import AppProvider from '@/components/AppProvider/inedx.vue';
   import FontAwesomeIcon from '@/components/FontAwesomeIcon/index.vue';
   import { SetClipboardData } from '@/utils/uniapi';
+  import { useRouter } from '@/hooks/router';
 
   const iconLink = ref('https://fontawesome.com/icons');
+  const route = useRouter();
 
   const onCopyLink = () => {
     SetClipboardData(iconLink.value);
   };
+  const onOpen = () => {
+    /* #ifdef H5 */
+    window.open(iconLink.value);
+    /* #endif */
+    /* #ifndef H5 */
+    onCopyLink();
+    /* #endif */
+  };
+  const jumpCheck = () => {
+    route.push('/demo/example/fontAwesomeIcon/check');
+  };
 </script>
 <template>
   <AppProvider>
-    <view class="h2"> FontAwesomeIcon 图标组件基于font awesome icon v6.20</view>
+    <view class="h2"> FontAwesomeIcon 图标组件基于font awesome icon v6.2</view>
     <view class="tip">
-      Tip: 由于字体文件太大,共7种风格图标, 7个字体文件,
+      Tip: 共6种风格图标, 7个字体文件,
       <!-- #ifdef MP-WEIXIN || MP-ALIPAY -->
       微信小程序和阿里小程序动态远程加载font awesome 字体,
       在\src\utils\fonts.ts中配置,
       <!-- #endif -->
-      <!-- #ifdef APP-PLUS -->
+      <!-- #ifndef MP-WEIXIN || MP-ALIPAY -->
-      APP加载font awesome 字体, 在\src\utils\fonts.ts中配置,
+      H5,APP(Android)在组件目录index.scss中配置引入字体,
       <!-- #endif -->
-      <!-- #ifndef MP-WEIXIN || MP-ALIPAY || APP-PLUS -->
+      已测试: 支持H5, APP(Android), 微信小程序
-      在组件目录index.scss中配置引入字体,
-      <!-- #endif -->
-      已测试: 支持H5, APP(安卓), 微信小程序
     </view>
-    <view class="tip">
+    <view class="tip" style="color: #595858; margin-top: 10px">
-      全部icon请查看:
+      官网:
-      <text class="link">{{ iconLink }}</text>
+      <text class="link" @click="onOpen">{{ iconLink }}</text>
       <FontAwesomeIcon mode="duotone" name="copy" @click="onCopyLink" />
     </view>
+    <view class="tip" style="color: #595858; margin-top: 10px">
+      <view>使用方法: 在官网图标库搜索查找需要的图标,Copy Icon Name</view>
+      <view class="link" @click="jumpCheck">图标不可用? Check!</view>
+    </view>
     <view class="title">mode-不同风格,对应相应字体</view>
     <view> <FontAwesomeIcon name="house" />solid (默认)</view>
     <view> <FontAwesomeIcon mode="regular" name="house" />regular</view>
@@ -43,10 +57,10 @@
       trash-can-clock</view
     >
     <view> <FontAwesomeIcon mode="duotone" name="house" />duotone house</view>
-    <view class="title">sharp-直角图标(只支持大部分solid),对应sharp字体</view>
+    <view class="title">sharp-直角图标,对应sharp字体</view>
     <view> <FontAwesomeIcon name="user" sharp counter="999" /> sharp </view>
 
-    <view class="title">mode(brands)-品牌logo,对应brands字体</view>
+    <view class="title">mode(brands)-logo,对应brands字体</view>
     <view> <FontAwesomeIcon mode="brands" name="bilibili" /> bilibili </view>
     <view> <FontAwesomeIcon mode="brands" name="alipay" /> alipay </view>
 
@@ -313,6 +327,7 @@
     .link {
       margin-right: 16rpx;
       &:hover {
+        color: #315efb;
         opacity: 0.6;
         text-decoration: underline;
       }
@@ -322,6 +337,7 @@
     font-size: 28rpx;
     font-weight: 600;
     margin: 28rpx 0 8rpx 0;
-    color: #3b82f6;
+    color: #333333;
+    font-style: oblique;
   }
 </style>

src/pages.json

@@ -92,6 +92,14 @@
       "meta": {
         "ignoreAuth": true
       }
+    },{
+      "path": "fontAwesomeIcon/check",
+      "style": {
+        "navigationBarTitleText": "FontAwesomeIcon-Check"
+      },
+      "meta": {
+        "ignoreAuth": true
+      }
     }]
   }],
   "globalStyle": {