fix: ant tag icon default style (#5473)

vbenjs · Feb 4, 2025 · f8bb396 · f8bb396
1 parent a832edc
commit f8bb396
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 4 deletions.
diff --git a/packages/styles/src/antd/index.css b/packages/styles/src/antd/index.css
@@ -13,15 +13,25 @@
   }
 
   /* * 修复按钮添加图标时的位置问题 */
-  svg {
+  > svg {
     display: inline-block;
   }
 
-  svg + span {
+  > svg + span {
     margin-inline-start: 6px;
   }
 }
 
+.ant-tag {
+  > svg {
+    display: inline-block;
+  }
+
+  > svg + span {
+    margin-inline-start: 4px;
+  }
+}
+
 .ant-message-notice-content,
 .ant-notification-notice {
   @apply dark:border-border/60 dark:border;

diff --git a/playground/src/views/examples/tippy/index.vue b/playground/src/views/examples/tippy/index.vue
@@ -4,8 +4,9 @@ import type { TippyProps } from '@vben/common-ui';
 import { reactive } from 'vue';
 
 import { Page, Tippy } from '@vben/common-ui';
+import { ChevronDown } from '@vben/icons';
 
-import { Button, Card, Flex } from 'ant-design-vue';
+import { Button, Card, Flex, Tag } from 'ant-design-vue';
 
 import { useVbenForm } from '#/adapter/form';
 
@@ -254,7 +255,7 @@ function goDoc() {
       <p class="mb-4">
         指令形式使用比较简洁，直接在需要展示tooltip的组件上用v-tippy传递配置，适用于固定内容的工具提示。
       </p>
-      <Flex warp="warp" gap="20">
+      <Flex warp="warp" gap="20" align="center">
         <Button v-tippy="'这是一个提示，使用了默认的配置'">默认配置</Button>
 
         <Button
@@ -277,8 +278,18 @@ function goDoc() {
             animation: 'scale',
           }"
         >
+          <template #icon>
+            <ChevronDown class="size-4" />
+          </template>
           指定动画
         </Button>
+        <Tag color="#f50">
+          <template #icon>
+            <ChevronDown class="size-4" />
+          </template>
+
+          默认配置
+        </Tag>
       </Flex>
     </Card>
     <Card title="组件形式使用" class="mt-4">