wip-Iconify Component#1

src/components/Iconify/index.vue

@@ -1,18 +1,55 @@
 <script lang="ts" setup name="Iconify">
+  // import '@purge-icons/generated';
+  // const props = defineProps({
+  //   icon: {
+  //     type: String,
+  //   },
+  // });
+  import Iconify from '@purge-icons/generated';
+  import { nextTick, ref, unref, watchEffect } from 'vue';
   const props = defineProps({
-    icon: {
+    name: {
       type: String,
+      default: () => '',
+    },
+    prefix: {
+      type: String,
+      default: () => 'ant-design',
     },
   });
+  const elRef = ref<Element>();
+  const update = async () => {
+    const el = unref(elRef);
+    if (!el) return;
+    await nextTick();
+    const icon = props.prefix + ':' + props.name;
+    if (!icon) return;
+    const svg = Iconify.renderSVG(icon, {
+      width: '1.2em',
+      height: '1.2em',
+    });
+    if (svg) {
+      el.textContent = '';
+      el.appendChild(svg);
+    } else {
+      const span = document.createElement('span');
+      span.className = 'iconify';
+      span.dataset.icon = icon;
+      el.textContent = '';
+      el.appendChild(span);
+    }
+  };
+  watchEffect(() => update());
 </script>
 <template>
-  <view
+  <view ref="elRef" class="iconify m-iconify" class="anticon"></view>
-    class="iconify m-iconify"
-    style="height: 44rpx; width: 44rpx"
-    :data-icon="icon"
-  ></view>
 </template>
 <style lang="scss" scoped>
+  .iconify {
+    display: inline-block;
+    height: 44rpx;
+    width: 44rpx;
+  }
   .m-iconify {
     vertical-align: middle;
   }

unocss.config.js

@@ -3,7 +3,7 @@
  * */
 
 import presetWeapp from 'unocss-preset-weapp';
-import { defineConfig } from 'unocss';
+import { defineConfig, presetIcons } from 'unocss';
 import {
   defaultAttributes,
   defaultIgnoreNonValuedAttributes,
@@ -33,6 +33,10 @@ export default defineConfig({
       nonValuedAttribute: true,
       prefix: 'uno-',
     }),
+    presetIcons({
+      scale: 1.2,
+      warn: true,
+    }),
   ],
   shortcuts: [
     {

vite.config.ts

@@ -40,7 +40,17 @@ export default ({ mode }: ConfigEnv): UserConfig => {
     plugins: [
       uni(),
       Unocss(),
-      PurgeIcons(),
+      PurgeIcons({
+        content: [
+          '**/*.html',
+          '**/*.js',
+          '**/*.ts',
+          '**/*.vue',
+          '**/*.jsx',
+          '**/*.tsx',
+          '**/*.json',
+        ],
+      }),
       // eslintPlugin({
       //   include: ['src/**/*.js', 'src/**/*.vue', 'src/**/*.ts'],
       //   exclude: ['./node_modules/**'],