From 26a8bfba42171cec9cef36ddfa24f950de4a20eb Mon Sep 17 00:00:00 2001
From: h_mo <596417202@qq.com>
Date: Tue, 20 Aug 2024 11:30:04 +0800
Subject: [PATCH] =?UTF-8?q?refactor(iconify):=20=E6=9B=B4=E6=96=B0?=
 =?UTF-8?q?=E5=9B=BE=E6=A0=87=E7=BB=84=E4=BB=B6=E5=B9=B6=E8=B0=83=E6=95=B4?=
 =?UTF-8?q?=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 重构Iconify组件，移除点击事件处理和冗余的数字检查函数。- 添加组件文档注释，说明如何使用和可用图标库。
- 更改模板中使用的图标类名前缀以适应新组件。
- 在尾风CSS配置中引入新图标集合，并调整插件顺序。- 更新示例页面上的图标，统一使用'i-mdi-account-box'进行测试。
- 在package.json中调整mp-weixin的开发命令，移除与devtools相关的部分。- 从'tailwind.config.js'中移除预制和容器核心插件的MP适配代码。BREAKING CHANGE: 图标类名前缀已更改，这可能会影响使用自定义样式或依赖特定类名的图标组件的现有代码。请确保更新图标引用以反映这些更改。
---
 package.json                     |  4 ++--
 src/components/Iconify/index.vue | 31 +++++++++++++------------------
 src/pages/demo/index.vue         |  8 +++++---
 tailwind.config.js               | 11 +++++++++--
 4 files changed, 29 insertions(+), 25 deletions(-)

diff --git a/package.json b/package.json
index 3650576..986f20d 100644
--- a/package.json
+++ b/package.json
@@ -13,7 +13,7 @@
     "dev:mp-lark": "uni -p mp-lark",
     "dev:mp-qq": "uni -p mp-qq",
     "dev:mp-toutiao": "uni -p mp-toutiao",
-    "dev:mp-weixin": "pnpm git:hooks && uni -p mp-weixin --devtools",
+    "dev:mp-weixin": "pnpm git:hooks && uni -p mp-weixin",
     "dev:quickapp-webview": "uni -p quickapp-webview",
     "dev:quickapp-webview-huawei": "uni -p quickapp-webview-huawei",
     "dev:quickapp-webview-union": "uni -p quickapp-webview-union",
@@ -64,8 +64,8 @@
     "@dcloudio/uni-automator": "3.0.0-alpha-4020520240808001",
     "@dcloudio/uni-cli-shared": "3.0.0-alpha-4020520240808001",
     "@dcloudio/uni-stacktracey": "3.0.0-alpha-4020520240808001",
-    "@dcloudio/uni-vue-devtools": "3.0.0-alpha-4020520240808001",
     "@dcloudio/vite-plugin-uni": "3.0.0-alpha-4020520240808001",
+    "@egoist/tailwindcss-icons": "^1.8.1",
     "@iconify/json": "^2.2.238",
     "@types/crypto-js": "^4.2.2",
     "@types/lodash-es": "^4.17.12",
diff --git a/src/components/Iconify/index.vue b/src/components/Iconify/index.vue
index 40b470f..b5e8706 100644
--- a/src/components/Iconify/index.vue
+++ b/src/components/Iconify/index.vue
@@ -1,39 +1,34 @@
-<script lang="ts" setup name="Iconify">
+<script lang="ts" setup>
+/**
+ * @name Iconify
+ * @desc 图标组件 使用 iconify + tailwindcss
+ * 更多图标库 https://icon-sets.iconify.design/
+ * @docs https://github.com/egoist/tailwindcss-icons
+ * @example <Iconify icon="i-mdi-account-box" size="32" color="green" />
+ */
+
 interface Props {
   icon: string
   size?: string | number
   color?: string
 }
-/**
- * @name Iconify
- * @desc 图标
- * @docs https://iconify.design/docs/icon-components/vue/
- * @example <Iconify icon="ant-design:home-outlined" />
- */
 const props = withDefaults(defineProps<Props>(), {
   size: 'inherit',
   color: 'inherit',
 });
 
-const emits = defineEmits(['click']);
-function click() {
-  emits('click');
-}
-
-function isNumber(str: string | number): boolean {
-  return !Number.isNaN(Number(str));
-}
+const iconSize = computed(() => (Number.isNaN(Number(props.size)) ? `${props.size}` : `${props.size}rpx`));
 </script>
 
 <template>
-  <view class="iconify-icon" :class="[props.icon]" @click="click" />
+  <text class="iconify-icon" :class="[props.icon]" />
 </template>
 
 <style lang="scss" scoped>
 .iconify-icon {
   display: inline-block;
   line-height: 1;
-  font-size: v-bind('isNumber(props.size) ? `${props.size}px` : props.size');
-  color: v-bind('props.color');
+  font-size: v-bind('iconSize');
+  color: v-bind('color');
 }
 </style>
diff --git a/src/pages/demo/index.vue b/src/pages/demo/index.vue
index e4a9905..7d0037f 100644
--- a/src/pages/demo/index.vue
+++ b/src/pages/demo/index.vue
@@ -11,9 +11,11 @@ const demo = ref('Demo');
       iconify 组件
     </view>
     <view class="mt-30px center flex flex-row gap-10px">
-      <Iconify icon="i-ri-alipay-fill" size="32" color="blue" />
-      <Iconify icon="i-ri-settings-5-line" size="48" color="orange" />
-      <Iconify icon="i-ri-wechat-fill" size="32" color="green" />
+      <Iconify icon="i-mdi-account-box" size="64" color="blue" />
+      <Iconify icon="i-mdi-account-box" size="48" color="orange" />
+      <Iconify icon="i-mdi-account-box" size="32" color="green" />
+      <Iconify icon="i-mdi-account-box" />
+      <Iconify icon="i-svg-spinners-12-dots-scale-rotate" />
     </view>
   </view>
 </template>
diff --git a/tailwind.config.js b/tailwind.config.js
index 1f23d6e..99643e6 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,3 +1,6 @@
+import { getIconCollections, iconsPlugin } from '@egoist/tailwindcss-icons';
+import { isMp } from './build/platform';
+
 /** @type {import('tailwindcss').Config} */
 export default {
   content: ['./public/index.html', './src/**/*.{html,js,ts,jsx,tsx,vue}'],
@@ -5,7 +8,11 @@ export default {
     extend: {},
   },
   corePlugins: {
-    preflight: false,
+    // 小程序去使用 h5 的 preflight 和响应式 container 没有意义
+    preflight: !isMp,
+    container: !isMp,
   },
-  plugins: [],
+  plugins: [iconsPlugin({
+    collections: getIconCollections(['mdi', 'svg-spinners']),
+  })],
 };