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>

types/components.d.ts

@@ -10,123 +10,124 @@ export {}
 declare module '@vue/runtime-core' {
   export interface GlobalComponents {
     Empty: typeof import('./../src/components/Empty/index.vue')['default']
-    FDragItem: typeof import('./../src/components/firstui/fui-drag/f-drag-item.vue')['default']
-    FIndexListItem: typeof import('./../src/components/firstui/fui-index-list/f-index-list-item.vue')['default']
-    FuiActionsheet: typeof import('./../src/components/firstui/fui-actionsheet/fui-actionsheet.vue')['default']
-    FuiAlert: typeof import('./../src/components/firstui/fui-alert/fui-alert.vue')['default']
-    FuiAnimation: typeof import('./../src/components/firstui/fui-animation/fui-animation.vue')['default']
-    FuiAutograph: typeof import('./../src/components/firstui/fui-autograph/fui-autograph.vue')['default']
-    FuiAvatar: typeof import('./../src/components/firstui/fui-avatar/fui-avatar.vue')['default']
-    FuiBackdrop: typeof import('./../src/components/firstui/fui-backdrop/fui-backdrop.vue')['default']
-    FuiBacktop: typeof import('./../src/components/firstui/fui-backtop/fui-backtop.vue')['default']
-    FuiBadge: typeof import('./../src/components/firstui/fui-badge/fui-badge.vue')['default']
-    FuiBarcode: typeof import('./../src/components/firstui/fui-barcode/fui-barcode.vue')['default']
-    FuiBottomNavbar: typeof import('./../src/components/firstui/fui-bottom-navbar/fui-bottom-navbar.vue')['default']
-    FuiBottomPopup: typeof import('./../src/components/firstui/fui-bottom-popup/fui-bottom-popup.vue')['default']
-    FuiBubbleBox: typeof import('./../src/components/firstui/fui-bubble-box/fui-bubble-box.vue')['default']
-    FuiButton: typeof import('./../src/components/firstui/fui-button/fui-button.vue')['default']
-    FuiCalendar: typeof import('./../src/components/firstui/fui-calendar/fui-calendar.vue')['default']
-    FuiCard: typeof import('./../src/components/firstui/fui-card/fui-card.vue')['default']
-    FuiCascader: typeof import('./../src/components/firstui/fui-cascader/fui-cascader.vue')['default']
-    FuiCheckbox: typeof import('./../src/components/firstui/fui-checkbox/fui-checkbox.vue')['default']
-    FuiCheckboxGroup: typeof import('./../src/components/firstui/fui-checkbox-group/fui-checkbox-group.vue')['default']
-    FuiCircle: typeof import('./../src/components/firstui/fui-circle/fui-circle.vue')['default']
-    FuiCol: typeof import('./../src/components/firstui/fui-col/fui-col.vue')['default']
-    FuiCollapse: typeof import('./../src/components/firstui/fui-collapse/fui-collapse.vue')['default']
-    FuiCollapseItem: typeof import('./../src/components/firstui/fui-collapse-item/fui-collapse-item.vue')['default']
-    FuiCopyText: typeof import('./../src/components/firstui/fui-copy-text/fui-copy-text.vue')['default']
-    FuiCountDown: typeof import('./../src/components/firstui/fui-count-down/fui-count-down.vue')['default']
-    FuiCountdownVerify: typeof import('./../src/components/firstui/fui-countdown-verify/fui-countdown-verify.vue')['default']
-    FuiCubicBezier: typeof import('./../src/components/firstui/fui-cubic-bezier/fui-cubic-bezier.vue')['default']
-    FuiDataTag: typeof import('./../src/components/firstui/fui-data-tag/fui-data-tag.vue')['default']
-    FuiDatePicker: typeof import('./../src/components/firstui/fui-date-picker/fui-date-picker.vue')['default']
-    FuiDialog: typeof import('./../src/components/firstui/fui-dialog/fui-dialog.vue')['default']
-    FuiDigitalKeyboard: typeof import('./../src/components/firstui/fui-digital-keyboard/fui-digital-keyboard.vue')['default']
-    FuiDigitalRoller: typeof import('./../src/components/firstui/fui-digital-roller/fui-digital-roller.vue')['default']
-    FuiDivider: typeof import('./../src/components/firstui/fui-divider/fui-divider.vue')['default']
-    FuiDrag: typeof import('./../src/components/firstui/fui-drag/fui-drag.vue')['default']
-    FuiDrawer: typeof import('./../src/components/firstui/fui-drawer/fui-drawer.vue')['default']
-    FuiDropdownList: typeof import('./../src/components/firstui/fui-dropdown-list/fui-dropdown-list.vue')['default']
-    FuiDropdownMenu: typeof import('./../src/components/firstui/fui-dropdown-menu/fui-dropdown-menu.vue')['default']
-    FuiEmpty: typeof import('./../src/components/firstui/fui-empty/fui-empty.vue')['default']
-    FuiFab: typeof import('./../src/components/firstui/fui-fab/fui-fab.vue')['default']
-    FuiFilterBar: typeof import('./../src/components/firstui/fui-filter-bar/fui-filter-bar.vue')['default']
-    FuiFooter: typeof import('./../src/components/firstui/fui-footer/fui-footer.vue')['default']
-    FuiForm: typeof import('./../src/components/firstui/fui-form/fui-form.vue')['default']
-    FuiFormField: typeof import('./../src/components/firstui/fui-form-field/fui-form-field.vue')['default']
-    FuiFormItem: typeof import('./../src/components/firstui/fui-form-item/fui-form-item.vue')['default']
-    FuiGallery: typeof import('./../src/components/firstui/fui-gallery/fui-gallery.vue')['default']
-    FuiGrid: typeof import('./../src/components/firstui/fui-grid/fui-grid.vue')['default']
-    FuiGridItem: typeof import('./../src/components/firstui/fui-grid-item/fui-grid-item.vue')['default']
-    FuiIcon: typeof import('./../src/components/firstui/fui-icon/fui-icon.vue')['default']
-    FuiImageCropper: typeof import('./../src/components/firstui/fui-image-cropper/fui-image-cropper.vue')['default']
-    FuiIndexList: typeof import('./../src/components/firstui/fui-index-list/fui-index-list.vue')['default']
-    FuiInput: typeof import('./../src/components/firstui/fui-input/fui-input.vue')['default']
-    FuiInputNumber: typeof import('./../src/components/firstui/fui-input-number/fui-input-number.vue')['default']
-    FuiLabel: typeof import('./../src/components/firstui/fui-label/fui-label.vue')['default']
-    FuiLandscape: typeof import('./../src/components/firstui/fui-landscape/fui-landscape.vue')['default']
-    FuiLazyload: typeof import('./../src/components/firstui/fui-lazyload/fui-lazyload.vue')['default']
-    FuiLicensePlate: typeof import('./../src/components/firstui/fui-license-plate/fui-license-plate.vue')['default']
-    FuiList: typeof import('./../src/components/firstui/fui-list/fui-list.vue')['default']
-    FuiListCell: typeof import('./../src/components/firstui/fui-list-cell/fui-list-cell.vue')['default']
-    FuiLoadAni: typeof import('./../src/components/firstui/fui-load-ani/fui-load-ani.vue')['default']
-    FuiLoading: typeof import('./../src/components/firstui/fui-loading/fui-loading.vue')['default']
-    FuiLoadmore: typeof import('./../src/components/firstui/fui-loadmore/fui-loadmore.vue')['default']
-    FuiMessage: typeof import('./../src/components/firstui/fui-message/fui-message.vue')['default']
-    FuiModal: typeof import('./../src/components/firstui/fui-modal/fui-modal.vue')['default']
-    FuiNavBar: typeof import('./../src/components/firstui/fui-nav-bar/fui-nav-bar.vue')['default']
-    FuiNoticeBar: typeof import('./../src/components/firstui/fui-notice-bar/fui-notice-bar.vue')['default']
-    FuiOverflowHidden: typeof import('./../src/components/firstui/fui-overflow-hidden/fui-overflow-hidden.vue')['default']
-    FuiPagination: typeof import('./../src/components/firstui/fui-pagination/fui-pagination.vue')['default']
-    FuiPanel: typeof import('./../src/components/firstui/fui-panel/fui-panel.vue')['default']
-    FuiPicker: typeof import('./../src/components/firstui/fui-picker/fui-picker.vue')['default']
-    FuiPoster: typeof import('./../src/components/firstui/fui-poster/fui-poster.vue')['default']
-    FuiPosterWeex: typeof import('./../src/components/firstui/fui-poster-weex/fui-poster-weex.vue')['default']
-    FuiPreview: typeof import('./../src/components/firstui/fui-preview/fui-preview.vue')['default']
-    FuiProgress: typeof import('./../src/components/firstui/fui-progress/fui-progress.vue')['default']
-    FuiPuzzleVerify: typeof import('./../src/components/firstui/fui-puzzle-verify/fui-puzzle-verify.vue')['default']
-    FuiQrcode: typeof import('./../src/components/firstui/fui-qrcode/fui-qrcode.vue')['default']
-    FuiRadio: typeof import('./../src/components/firstui/fui-radio/fui-radio.vue')['default']
-    FuiRadioGroup: typeof import('./../src/components/firstui/fui-radio-group/fui-radio-group.vue')['default']
-    FuiRate: typeof import('./../src/components/firstui/fui-rate/fui-rate.vue')['default']
-    FuiResult: typeof import('./../src/components/firstui/fui-result/fui-result.vue')['default']
-    FuiRotateVerify: typeof import('./../src/components/firstui/fui-rotate-verify/fui-rotate-verify.vue')['default']
-    FuiRow: typeof import('./../src/components/firstui/fui-row/fui-row.vue')['default']
-    FuiSafeArea: typeof import('./../src/components/firstui/fui-safe-area/fui-safe-area.vue')['default']
-    FuiSearchBar: typeof import('./../src/components/firstui/fui-search-bar/fui-search-bar.vue')['default']
-    FuiSegmentedControl: typeof import('./../src/components/firstui/fui-segmented-control/fui-segmented-control.vue')['default']
-    FuiSelect: typeof import('./../src/components/firstui/fui-select/fui-select.vue')['default']
-    FuiShareSheet: typeof import('./../src/components/firstui/fui-share-sheet/fui-share-sheet.vue')['default']
-    FuiSingleInput: typeof import('./../src/components/firstui/fui-single-input/fui-single-input.vue')['default']
-    FuiSkeleton: typeof import('./../src/components/firstui/fui-skeleton/fui-skeleton.vue')['default']
-    FuiSlider: typeof import('./../src/components/firstui/fui-slider/fui-slider.vue')['default']
-    FuiSliderCaptcha: typeof import('./../src/components/firstui/fui-slider-captcha/fui-slider-captcha.vue')['default']
-    FuiSlideVerify: typeof import('./../src/components/firstui/fui-slide-verify/fui-slide-verify.vue')['default']
-    FuiSpin: typeof import('./../src/components/firstui/fui-spin/fui-spin.vue')['default']
-    FuiStatusBar: typeof import('./../src/components/firstui/fui-status-bar/fui-status-bar.vue')['default']
-    FuiSteps: typeof import('./../src/components/firstui/fui-steps/fui-steps.vue')['default']
-    FuiSticky: typeof import('./../src/components/firstui/fui-sticky/fui-sticky.vue')['default']
-    FuiSwipeAction: typeof import('./../src/components/firstui/fui-swipe-action/fui-swipe-action.vue')['default']
-    FuiSwipeactionGroup: typeof import('./../src/components/firstui/fui-swipeaction-group/fui-swipeaction-group.vue')['default']
-    FuiSwiperDot: typeof import('./../src/components/firstui/fui-swiper-dot/fui-swiper-dot.vue')['default']
-    FuiSwitch: typeof import('./../src/components/firstui/fui-switch/fui-switch.vue')['default']
-    FuiTabbar: typeof import('./../src/components/firstui/fui-tabbar/fui-tabbar.vue')['default']
-    FuiTable: typeof import('./../src/components/firstui/fui-table/fui-table.vue')['default']
-    FuiTabs: typeof import('./../src/components/firstui/fui-tabs/fui-tabs.vue')['default']
-    FuiTag: typeof import('./../src/components/firstui/fui-tag/fui-tag.vue')['default']
-    FuiText: typeof import('./../src/components/firstui/fui-text/fui-text.vue')['default']
-    FuiTextarea: typeof import('./../src/components/firstui/fui-textarea/fui-textarea.vue')['default']
-    FuiTimeaxis: typeof import('./../src/components/firstui/fui-timeaxis/fui-timeaxis.vue')['default']
-    FuiTimeaxisNode: typeof import('./../src/components/firstui/fui-timeaxis-node/fui-timeaxis-node.vue')['default']
-    FuiTimer: typeof import('./../src/components/firstui/fui-timer/fui-timer.vue')['default']
-    FuiToast: typeof import('./../src/components/firstui/fui-toast/fui-toast.vue')['default']
-    FuiTopPopup: typeof import('./../src/components/firstui/fui-top-popup/fui-top-popup.vue')['default']
-    FuiUpload: typeof import('./../src/components/firstui/fui-upload/fui-upload.vue')['default']
-    FuiUploadVideo: typeof import('./../src/components/firstui/fui-upload-video/fui-upload-video.vue')['default']
-    FuiVtabs: typeof import('./../src/components/firstui/fui-vtabs/fui-vtabs.vue')['default']
-    FuiVtabsContent: typeof import('./../src/components/firstui/fui-vtabs-content/fui-vtabs-content.vue')['default']
-    FuiWaterfall: typeof import('./../src/components/firstui/fui-waterfall/fui-waterfall.vue')['default']
-    FuiWaterfallItem: typeof import('./../src/components/firstui/fui-waterfall-item/fui-waterfall-item.vue')['default']
+    FDragItem: typeof import('./../src/components/FirstUI/fui-drag/f-drag-item.vue')['default']
+    FIndexListItem: typeof import('./../src/components/FirstUI/fui-index-list/f-index-list-item.vue')['default']
+    FuiActionsheet: typeof import('./../src/components/FirstUI/fui-actionsheet/fui-actionsheet.vue')['default']
+    FuiAlert: typeof import('./../src/components/FirstUI/fui-alert/fui-alert.vue')['default']
+    FuiAnimation: typeof import('./../src/components/FirstUI/fui-animation/fui-animation.vue')['default']
+    FuiAutograph: typeof import('./../src/components/FirstUI/fui-autograph/fui-autograph.vue')['default']
+    FuiAvatar: typeof import('./../src/components/FirstUI/fui-avatar/fui-avatar.vue')['default']
+    FuiBackdrop: typeof import('./../src/components/FirstUI/fui-backdrop/fui-backdrop.vue')['default']
+    FuiBacktop: typeof import('./../src/components/FirstUI/fui-backtop/fui-backtop.vue')['default']
+    FuiBadge: typeof import('./../src/components/FirstUI/fui-badge/fui-badge.vue')['default']
+    FuiBarcode: typeof import('./../src/components/FirstUI/fui-barcode/fui-barcode.vue')['default']
+    FuiBottomNavbar: typeof import('./../src/components/FirstUI/fui-bottom-navbar/fui-bottom-navbar.vue')['default']
+    FuiBottomPopup: typeof import('./../src/components/FirstUI/fui-bottom-popup/fui-bottom-popup.vue')['default']
+    FuiBubbleBox: typeof import('./../src/components/FirstUI/fui-bubble-box/fui-bubble-box.vue')['default']
+    FuiButton: typeof import('./../src/components/FirstUI/fui-button/fui-button.vue')['default']
+    FuiCalendar: typeof import('./../src/components/FirstUI/fui-calendar/fui-calendar.vue')['default']
+    FuiCard: typeof import('./../src/components/FirstUI/fui-card/fui-card.vue')['default']
+    FuiCascader: typeof import('./../src/components/FirstUI/fui-cascader/fui-cascader.vue')['default']
+    FuiCheckbox: typeof import('./../src/components/FirstUI/fui-checkbox/fui-checkbox.vue')['default']
+    FuiCheckboxGroup: typeof import('./../src/components/FirstUI/fui-checkbox-group/fui-checkbox-group.vue')['default']
+    FuiCircle: typeof import('./../src/components/FirstUI/fui-circle/fui-circle.vue')['default']
+    FuiCol: typeof import('./../src/components/FirstUI/fui-col/fui-col.vue')['default']
+    FuiCollapse: typeof import('./../src/components/FirstUI/fui-collapse/fui-collapse.vue')['default']
+    FuiCollapseItem: typeof import('./../src/components/FirstUI/fui-collapse-item/fui-collapse-item.vue')['default']
+    FuiCopyText: typeof import('./../src/components/FirstUI/fui-copy-text/fui-copy-text.vue')['default']
+    FuiCountDown: typeof import('./../src/components/FirstUI/fui-count-down/fui-count-down.vue')['default']
+    FuiCountdownVerify: typeof import('./../src/components/FirstUI/fui-countdown-verify/fui-countdown-verify.vue')['default']
+    FuiCubicBezier: typeof import('./../src/components/FirstUI/fui-cubic-bezier/fui-cubic-bezier.vue')['default']
+    FuiDataTag: typeof import('./../src/components/FirstUI/fui-data-tag/fui-data-tag.vue')['default']
+    FuiDatePicker: typeof import('./../src/components/FirstUI/fui-date-picker/fui-date-picker.vue')['default']
+    FuiDialog: typeof import('./../src/components/FirstUI/fui-dialog/fui-dialog.vue')['default']
+    FuiDigitalKeyboard: typeof import('./../src/components/FirstUI/fui-digital-keyboard/fui-digital-keyboard.vue')['default']
+    FuiDigitalRoller: typeof import('./../src/components/FirstUI/fui-digital-roller/fui-digital-roller.vue')['default']
+    FuiDivider: typeof import('./../src/components/FirstUI/fui-divider/fui-divider.vue')['default']
+    FuiDrag: typeof import('./../src/components/FirstUI/fui-drag/fui-drag.vue')['default']
+    FuiDrawer: typeof import('./../src/components/FirstUI/fui-drawer/fui-drawer.vue')['default']
+    FuiDropdownList: typeof import('./../src/components/FirstUI/fui-dropdown-list/fui-dropdown-list.vue')['default']
+    FuiDropdownMenu: typeof import('./../src/components/FirstUI/fui-dropdown-menu/fui-dropdown-menu.vue')['default']
+    FuiEmpty: typeof import('./../src/components/FirstUI/fui-empty/fui-empty.vue')['default']
+    FuiFab: typeof import('./../src/components/FirstUI/fui-fab/fui-fab.vue')['default']
+    FuiFilterBar: typeof import('./../src/components/FirstUI/fui-filter-bar/fui-filter-bar.vue')['default']
+    FuiFooter: typeof import('./../src/components/FirstUI/fui-footer/fui-footer.vue')['default']
+    FuiForm: typeof import('./../src/components/FirstUI/fui-form/fui-form.vue')['default']
+    FuiFormField: typeof import('./../src/components/FirstUI/fui-form-field/fui-form-field.vue')['default']
+    FuiFormItem: typeof import('./../src/components/FirstUI/fui-form-item/fui-form-item.vue')['default']
+    FuiGallery: typeof import('./../src/components/FirstUI/fui-gallery/fui-gallery.vue')['default']
+    FuiGrid: typeof import('./../src/components/FirstUI/fui-grid/fui-grid.vue')['default']
+    FuiGridItem: typeof import('./../src/components/FirstUI/fui-grid-item/fui-grid-item.vue')['default']
+    FuiIcon: typeof import('./../src/components/FirstUI/fui-icon/fui-icon.vue')['default']
+    FuiImageCropper: typeof import('./../src/components/FirstUI/fui-image-cropper/fui-image-cropper.vue')['default']
+    FuiIndexList: typeof import('./../src/components/FirstUI/fui-index-list/fui-index-list.vue')['default']
+    FuiInput: typeof import('./../src/components/FirstUI/fui-input/fui-input.vue')['default']
+    FuiInputNumber: typeof import('./../src/components/FirstUI/fui-input-number/fui-input-number.vue')['default']
+    FuiLabel: typeof import('./../src/components/FirstUI/fui-label/fui-label.vue')['default']
+    FuiLandscape: typeof import('./../src/components/FirstUI/fui-landscape/fui-landscape.vue')['default']
+    FuiLazyload: typeof import('./../src/components/FirstUI/fui-lazyload/fui-lazyload.vue')['default']
+    FuiLicensePlate: typeof import('./../src/components/FirstUI/fui-license-plate/fui-license-plate.vue')['default']
+    FuiList: typeof import('./../src/components/FirstUI/fui-list/fui-list.vue')['default']
+    FuiListCell: typeof import('./../src/components/FirstUI/fui-list-cell/fui-list-cell.vue')['default']
+    FuiLoadAni: typeof import('./../src/components/FirstUI/fui-load-ani/fui-load-ani.vue')['default']
+    FuiLoading: typeof import('./../src/components/FirstUI/fui-loading/fui-loading.vue')['default']
+    FuiLoadmore: typeof import('./../src/components/FirstUI/fui-loadmore/fui-loadmore.vue')['default']
+    FuiMessage: typeof import('./../src/components/FirstUI/fui-message/fui-message.vue')['default']
+    FuiModal: typeof import('./../src/components/FirstUI/fui-modal/fui-modal.vue')['default']
+    FuiNavBar: typeof import('./../src/components/FirstUI/fui-nav-bar/fui-nav-bar.vue')['default']
+    FuiNoticeBar: typeof import('./../src/components/FirstUI/fui-notice-bar/fui-notice-bar.vue')['default']
+    FuiOverflowHidden: typeof import('./../src/components/FirstUI/fui-overflow-hidden/fui-overflow-hidden.vue')['default']
+    FuiPagination: typeof import('./../src/components/FirstUI/fui-pagination/fui-pagination.vue')['default']
+    FuiPanel: typeof import('./../src/components/FirstUI/fui-panel/fui-panel.vue')['default']
+    FuiPicker: typeof import('./../src/components/FirstUI/fui-picker/fui-picker.vue')['default']
+    FuiPoster: typeof import('./../src/components/FirstUI/fui-poster/fui-poster.vue')['default']
+    FuiPosterWeex: typeof import('./../src/components/FirstUI/fui-poster-weex/fui-poster-weex.vue')['default']
+    FuiPreview: typeof import('./../src/components/FirstUI/fui-preview/fui-preview.vue')['default']
+    FuiProgress: typeof import('./../src/components/FirstUI/fui-progress/fui-progress.vue')['default']
+    FuiPuzzleVerify: typeof import('./../src/components/FirstUI/fui-puzzle-verify/fui-puzzle-verify.vue')['default']
+    FuiQrcode: typeof import('./../src/components/FirstUI/fui-qrcode/fui-qrcode.vue')['default']
+    FuiRadio: typeof import('./../src/components/FirstUI/fui-radio/fui-radio.vue')['default']
+    FuiRadioGroup: typeof import('./../src/components/FirstUI/fui-radio-group/fui-radio-group.vue')['default']
+    FuiRate: typeof import('./../src/components/FirstUI/fui-rate/fui-rate.vue')['default']
+    FuiResult: typeof import('./../src/components/FirstUI/fui-result/fui-result.vue')['default']
+    FuiRotateVerify: typeof import('./../src/components/FirstUI/fui-rotate-verify/fui-rotate-verify.vue')['default']
+    FuiRow: typeof import('./../src/components/FirstUI/fui-row/fui-row.vue')['default']
+    FuiSafeArea: typeof import('./../src/components/FirstUI/fui-safe-area/fui-safe-area.vue')['default']
+    FuiSearchBar: typeof import('./../src/components/FirstUI/fui-search-bar/fui-search-bar.vue')['default']
+    FuiSegmentedControl: typeof import('./../src/components/FirstUI/fui-segmented-control/fui-segmented-control.vue')['default']
+    FuiSelect: typeof import('./../src/components/FirstUI/fui-select/fui-select.vue')['default']
+    FuiShareSheet: typeof import('./../src/components/FirstUI/fui-share-sheet/fui-share-sheet.vue')['default']
+    FuiSingleInput: typeof import('./../src/components/FirstUI/fui-single-input/fui-single-input.vue')['default']
+    FuiSkeleton: typeof import('./../src/components/FirstUI/fui-skeleton/fui-skeleton.vue')['default']
+    FuiSlider: typeof import('./../src/components/FirstUI/fui-slider/fui-slider.vue')['default']
+    FuiSliderCaptcha: typeof import('./../src/components/FirstUI/fui-slider-captcha/fui-slider-captcha.vue')['default']
+    FuiSlideVerify: typeof import('./../src/components/FirstUI/fui-slide-verify/fui-slide-verify.vue')['default']
+    FuiSpin: typeof import('./../src/components/FirstUI/fui-spin/fui-spin.vue')['default']
+    FuiStatusBar: typeof import('./../src/components/FirstUI/fui-status-bar/fui-status-bar.vue')['default']
+    FuiSteps: typeof import('./../src/components/FirstUI/fui-steps/fui-steps.vue')['default']
+    FuiSticky: typeof import('./../src/components/FirstUI/fui-sticky/fui-sticky.vue')['default']
+    FuiSwipeAction: typeof import('./../src/components/FirstUI/fui-swipe-action/fui-swipe-action.vue')['default']
+    FuiSwipeactionGroup: typeof import('./../src/components/FirstUI/fui-swipeaction-group/fui-swipeaction-group.vue')['default']
+    FuiSwiperDot: typeof import('./../src/components/FirstUI/fui-swiper-dot/fui-swiper-dot.vue')['default']
+    FuiSwitch: typeof import('./../src/components/FirstUI/fui-switch/fui-switch.vue')['default']
+    FuiTabbar: typeof import('./../src/components/FirstUI/fui-tabbar/fui-tabbar.vue')['default']
+    FuiTable: typeof import('./../src/components/FirstUI/fui-table/fui-table.vue')['default']
+    FuiTabs: typeof import('./../src/components/FirstUI/fui-tabs/fui-tabs.vue')['default']
+    FuiTag: typeof import('./../src/components/FirstUI/fui-tag/fui-tag.vue')['default']
+    FuiText: typeof import('./../src/components/FirstUI/fui-text/fui-text.vue')['default']
+    FuiTextarea: typeof import('./../src/components/FirstUI/fui-textarea/fui-textarea.vue')['default']
+    FuiTimeaxis: typeof import('./../src/components/FirstUI/fui-timeaxis/fui-timeaxis.vue')['default']
+    FuiTimeaxisNode: typeof import('./../src/components/FirstUI/fui-timeaxis-node/fui-timeaxis-node.vue')['default']
+    FuiTimer: typeof import('./../src/components/FirstUI/fui-timer/fui-timer.vue')['default']
+    FuiToast: typeof import('./../src/components/FirstUI/fui-toast/fui-toast.vue')['default']
+    FuiTopPopup: typeof import('./../src/components/FirstUI/fui-top-popup/fui-top-popup.vue')['default']
+    FuiUpload: typeof import('./../src/components/FirstUI/fui-upload/fui-upload.vue')['default']
+    FuiUploadVideo: typeof import('./../src/components/FirstUI/fui-upload-video/fui-upload-video.vue')['default']
+    FuiVtabs: typeof import('./../src/components/FirstUI/fui-vtabs/fui-vtabs.vue')['default']
+    FuiVtabsContent: typeof import('./../src/components/FirstUI/fui-vtabs-content/fui-vtabs-content.vue')['default']
+    FuiWaterfall: typeof import('./../src/components/FirstUI/fui-waterfall/fui-waterfall.vue')['default']
+    FuiWaterfallItem: typeof import('./../src/components/FirstUI/fui-waterfall-item/fui-waterfall-item.vue')['default']
+    Icon: typeof import('./../src/components/Icon/index.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
     ThumbnailPreview: typeof import('./../src/components/ThumbnailPreview/index.vue')['default']

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