fix: 修复小图标出码BUG (opentiny#1447)

* fix: 修复小图标出码BUG

Author: 1degrees

packages/common/component/ConfigItem.vue

@@ -295,10 +295,7 @@ export default {
           return
         }
 
-        if (
-          property !== 'name' &&
-          ['SelectIconConfigurator', 'SelectIconConfigurator'].includes(props.property.widget.component)
-        ) {
+        if (property !== 'name' && ['SelectIconConfigurator'].includes(props.property.widget.component)) {
           // icon以组件形式传入，实现类似:icon="IconPlus"的图标配置（排除Icon组件本身）
           value = {
             componentName: 'Icon',

packages/vue-generator/src/generator/vue/sfc/generateAttribute.js

@@ -427,7 +427,7 @@ export const handleTinyIconPropsHook = (schemaData, globalHooks, config) => {
         })
       }
 
-      attributes.push(isJSX ? `icon={${iconName}}` : `:icon="${iconName}"`)
+      attributes.push(isJSX ? `${key}={${iconName}}` : `:${key}="${iconName}"`)
 
       delete props[key]
     }

packages/vue-generator/test/testcases/sfc/case08/case08.test.js

@@ -0,0 +1,12 @@
+import { expect, test } from 'vitest'
+import { genSFCWithDefaultPlugin } from '@/generator/vue/sfc'
+import schema from './page.schema.json'
+import componentsMap from './componentsMap.json'
+import { formatCode } from '@/utils/formatCode'
+
+test('should use [suffix-icon] as icon relative attr', async () => {
+  const res = genSFCWithDefaultPlugin(schema, componentsMap)
+  const formattedCode = formatCode(res, 'vue')
+
+  await expect(formattedCode).toMatchFileSnapshot('./expected/iconTest.vue')
+})

packages/vue-generator/test/testcases/sfc/case08/componentsMap.json

@@ -0,0 +1,23 @@
+[
+  {
+    "componentName": "TinyButton",
+    "exportName": "Button",
+    "package": "@opentiny/vue",
+    "version": "^3.10.0",
+    "destructuring": true
+  },
+  {
+    "componentName": "TinyIcon",
+    "exportName": "Icon",
+    "package": "@opentiny/vue",
+    "version": "^3.10.0",
+    "destructuring": true
+  },
+  {
+    "componentName": "TinyDropdown",
+    "exportName": "Dropdown",
+    "package": "@opentiny/vue",
+    "version": "^3.10.0",
+    "destructuring": true
+  }
+]

packages/vue-generator/test/testcases/sfc/case08/expected/iconTest.vue

@@ -0,0 +1,49 @@
+<template>
+  <div class="page-base-style">
+    <tiny-button text="按钮文案" :resetTime="0" type="success" class="" :icon="TinyIconEdit"></tiny-button>
+    <tiny-dropdown
+      class=""
+      :suffix-icon="TinyIconMore"
+      :menu-options="{
+        options: [
+          { name: '老友粉', disabled: true },
+          { name: '狮子头', divided: true },
+          { name: '黄金糕', divided: true }
+        ]
+      }"
+    ></tiny-dropdown>
+    <tiny-icon-custom fill="currentColor" class=""></tiny-icon-custom>
+  </div>
+</template>
+
+<script setup>
+import { Button as TinyButton, Dropdown as TinyDropdown } from '@opentiny/vue'
+import { IconEdit, IconMore, IconCustom } from '@opentiny/vue-icon'
+import * as vue from 'vue'
+import { defineProps, defineEmits } from 'vue'
+import { I18nInjectionKey } from 'vue-i18n'
+const TinyIconEdit = IconEdit()
+const TinyIconMore = IconMore()
+const TinyIconCustom = IconCustom()
+const props = defineProps({})
+const emit = defineEmits([])
+const { t, lowcodeWrap, stores } = vue.inject(I18nInjectionKey).lowcode()
+const wrap = lowcodeWrap(props, {
+  emit
+})
+wrap({
+  stores
+})
+const state = vue.reactive({})
+wrap({
+  state
+})
+</script>
+<style scoped>
+.page-base-style {
+  display: flex;
+  margin: 0;
+  gap: 12px;
+  padding: 24px;
+}
+</style>

packages/vue-generator/test/testcases/sfc/case08/page.schema.json

@@ -0,0 +1,77 @@
+{
+  "componentName": "Page",
+  "css": ".page-base-style {\r\n  display: flex;\r\n  margin: 0;\r\n  gap: 12px;\r\n  padding: 24px;\r\n}\r\n",
+  "props": {
+    "className": "page-base-style"
+  },
+  "lifeCycles": {},
+  "children": [
+    {
+      "componentName": "TinyButton",
+      "props": {
+        "text": "按钮文案",
+        "resetTime": 0,
+        "className": "",
+        "icon": {
+          "componentName": "Icon",
+          "props": {
+            "name": "IconEdit"
+          }
+        },
+        "type": "success"
+      },
+      "children": [],
+      "id": "4e666212"
+    },
+    {
+      "componentName": "TinyDropdown",
+      "props": {
+        "className": "",
+        "suffix-icon": {
+          "componentName": "Icon",
+          "props": {
+            "name": "IconMore"
+          }
+        },
+        "menu-options": {
+          "options": [
+            {
+              "name": "老友粉",
+              "disabled": true
+            },
+            {
+              "name": "狮子头",
+              "divided": true
+            },
+            {
+              "name": "黄金糕",
+              "divided": true
+            }
+          ]
+        }
+      },
+      "children": [],
+      "id": "45532625"
+    },
+    {
+      "componentName": "Icon",
+      "props": {
+        "name": "IconCustom",
+        "className": ""
+      },
+      "children": [],
+      "id": "22235426"
+    }
+  ],
+  "dataSource": {
+    "list": []
+  },
+  "state": {},
+  "methods": {},
+  "utils": [],
+  "bridge": [],
+  "inputs": [],
+  "outputs": [],
+  "fileName": "TestIcon",
+  "id": "body"
+}