test: 实验性添加 unocss icon

build/vite/unocss.ts

@@ -2,7 +2,17 @@ import type { Plugin } from 'vite'
 
 // https://github.com/antfu/unocss
 import Unocss from 'unocss/vite'
+import { presetIcons } from 'unocss'
 
 export function configUnocssPlugin(): Plugin[] {
-    return Unocss()
+    return Unocss({
+        presets: [
+            presetIcons({
+                prefix: 'icon-',
+                extraProperties: {
+                    display: 'inline-flex',
+                },
+            }),
+        ],
+    })
 }

src/components/Icon/index.vue

+<script setup lang="ts">
+    const props = defineProps({
+        icon: {
+            type: String,
+            required: true,
+        },
+        size: {
+            type: Number || String,
+            default: 32,
+        },
+        color: {
+            type: String,
+            default: '#000',
+        },
+    })
+
+    const size = computed(() => `${props.size}rpx`)
+    const color = computed(() => props.color)
+</script>
+
+<template>
+    <view class="icon" />
+</template>
+
+<style lang="less" scoped>
+    .icon {
+        width: v-bind(size);
+        height: v-bind(size);
+        color: v-bind(color);
+    }
+</style>

src/pages/index/index.vue

@@ -36,19 +36,32 @@
 
     const animate = ref()
     const handUp = () => {
+        if (animate.value) {
+            return
+        }
+
         Message.toast('👋🏻')
         animate.value = 'animate-iteration-infinite'
-        setTimeout(() => (animate.value = ''), 1000)
+        setTimeout(() => (animate.value = null), 1500)
     }
 </script>
 
 <template>
     <view class="content flex-center flex-col">
-        <fui-avatar src="/static/logo.png" radius="14" size="large" background="transparent" @click="surprise" />
-        <view class="flex flex-col justify-center mb-3">
+        <fui-avatar
+            src="/static/logo.png"
+            radius="14"
+            size="large"
+            background="transparent"
+            class="!mb-5"
+            @click="surprise"
+        />
+        <view class="flex-center flex-col mb-5">
             <text class="title">{{ title }}</text>
             <text class="title">{{ $t('app.hello') }}</text>
-            <uni-icons type="hand-up" size="30" :class="['mt-5', 'animate-heart-beat', animate]" @click="handUp" />
+            <Icon icon="emojione:grinning-face" size="48" class="m-3" />
+
+            <uni-icons type="hand-up" size="30" class="mt-3 animate-swing" :class="[animate]" @click="handUp" />
         </view>
         <fui-footer isFixed>
             <template #text>

unocss.config.ts

 import { defineConfig } from 'unocss'
 import presetWeapp from 'unocss-preset-weapp'
-import { transformerAttributify, transformerClass } from 'unocss-preset-weapp/transformer'
+import { defaultAttributes, transformerAttributify, transformerClass } from 'unocss-preset-weapp/transformer'
+
+const transformRules = {
+    ':': '-',
+    '.': '_dl_',
+    '/': '_sl_',
+    '%': '_pes_',
+    '!': '_el_',
+    '#': '_wn_',
+    '(': '_lbl_',
+    ')': '_lbr_',
+    '[': '_lfl_',
+    ']': '_lfr_',
+    $: '_do_',
+    ',': '_lco_',
+    '=': '_eqe_',
+}
 
 export default defineConfig({
     presets: [
@@ -20,9 +36,14 @@ export default defineConfig({
     ],
     transformers: [
         // https://github.com/MellowCo/unocss-preset-weapp/tree/main/src/transformer/transformerAttributify
-        transformerAttributify(),
+        transformerAttributify({
+            attributes: [...defaultAttributes, 'icon'],
+            transformRules,
+        }),
 
         // https://github.com/MellowCo/unocss-preset-weapp/tree/main/src/transformer/transformerClass
-        transformerClass(),
+        transformerClass({
+            transformRules,
+        }),
     ],
 })