Icon 图标
WinDesign Next 提供了一套常用的图标集合。
使用图标
- 如果你想像用例一样直接使用，你需要全局注册组件，才能够直接在项目里使用。
安装
使用包管理器
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)
}自动导入
使用 unplugin-icons 和 unplugin-auto-import 从 iconify 中自动导入任何图标集。
基础用法
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 版权所有