refactor(iconify): 更新图标组件并调整样式

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

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",

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']);
+const iconSize = computed(() => (Number.isNaN(Number(props.size)) ? `${props.size}` : `${props.size}rpx`));
-function click() {
-  emits('click');
-}
-
-function isNumber(str: string | number): boolean {
-  return !Number.isNaN(Number(str));
-}
 </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');
+  font-size: v-bind('iconSize');
-  color: v-bind('props.color');
+  color: v-bind('color');
 }
 </style>

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-mdi-account-box" size="64" color="blue" />
-      <Iconify icon="i-ri-settings-5-line" size="48" color="orange" />
+      <Iconify icon="i-mdi-account-box" size="48" color="orange" />
-      <Iconify icon="i-ri-wechat-fill" size="32" color="green" />
+      <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>

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']),
+  })],
 };