Icon 图标
推荐使用方式
TIP
新开发的功能尽量使用 3.0 SVG 图标组件；2.0 字体图标（w-icon-* 类名）仅用于兼容存量项目，不建议新代码继续新增使用。
2.0 兼容
为降低 2.0（win-design）项目迁移成本，3.0 内置了 2.0 通用字体图标库。存量项目中的字体图标写法可直接使用，无需改动模板：
html
<i class="w-icon w-icon-home"></i>
<i class="w-icon w-icon-search"></i>
<i class="w-icon w-icon-loading2"></i>范围说明
兼容仅覆盖 2.0 通用图标库 icons（w-icon-* 类名）。
3.0 使用
安装：使用包管理器
shell
$ npm install @win-design-next/icons-vue --registry http://172.16.9.57:8081/repository/npm-group/ --saveshell
$ yarn add @win-design-next/icons-vue --registry http://172.16.9.57:8081/repository/npm-group/ --saveshell
$ pnpm install @win-design-next/icons-vue --registry http://172.16.9.57:8081/repository/npm-group/ --save注册所有图标
如果你想像用例一样直接使用，你需要全局注册组件，才能够直接在项目里使用。您需要从 @win-design-next/icons-vue 中导入所有图标并进行全局注册。
ts
// main.ts
import * as WinDesignNextIconsVue from '@win-design-next/icons-vue'
const app = createApp(App)
for (const [key, component] of Object.entries(WinDesignNextIconsVue)) {
app.component(key, component)
}基础用法
vue
<!-- 使用 w-icon 为 SVG 图标提供属性 -->
<template>
<div>
<w-icon :size="size" :color="color">
<Search />
</w-icon>
<!-- 或者独立使用它，不从父级获取属性 -->
<Search />
</div>
</template>结合 w-icon 使用
w-icon 为 raw SVG 图标提供额外的属性, 提供的详细属性请继续阅读。
vue
<template>
<w-icon :size="20" color="#409efc" class="no-inherit">
<Search />
</w-icon>
<w-icon class="is-loading">
<Loading />
</w-icon>
<w-icon>
<Search />
</w-icon>
<w-button type="primary">
<w-icon style="vertical-align: middle">
<Search />
</w-icon>
<span style="vertical-align: middle"> Search </span>
</w-button>
</template>通过添加额外的类名 is-loading，你的图标就可以在 2 秒内旋转 360 度，当然你也可以自己改写想要的动画。
直接使用 SVG 图标
vue
<template>
<div style="font-size: 20px">
<!-- 由于SVG图标默认不携带任何属性 -->
<!-- 你需要直接提供它们 -->
<Search style="width: 1em; height: 1em; margin-right: 8px" />
</div>
</template>图标集合
TIP
只要你安装了 @win-design-next/icons-vue，就可以在任意版本里使用 SVG 图标。
您可以点击图标复制代码。
Copy icon code
API
Attributes
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| color | svg 的 fill 颜色 | string | 继承颜色 |
| size | SVG 图标的大小，size x size | number / string | 继承字体大小 |
Slots
| 名称 | 说明 |
|---|---|
| default | 自定义默认内容 |
Copyright 2025 Winning Health 版权所有