Icon 图标
Uniboot UI 提供一组常用图标。
使用方式
若想像示例一样直接使用，需先在应用中全局注册对应组件。
查看全部 SVG 图标可浏览 @uniboot/icons-vue@1.x、@uniboot/icons-vue@latest，以及源码仓库 uniboot-ui-icons，或本页下方图标集合。
安装
包管理器
任选其一。
$ npm install @uniboot/icons-vue$ yarn add @uniboot/icons-vue$ pnpm install @uniboot/icons-vue注册全部图标
从 @uniboot/icons-vue 引入并全局注册。
// main.ts
// 若使用 CDN 方式，请删除本段 import。
import * as UnibootUIIconsVue from '@uniboot/icons-vue'
const app = createApp(App)
for (const [key, component] of Object.entries(UnibootUIIconsVue)) {
app.component(key, component)
}也可参考 CodePen 模板。
浏览器引入
通过 <script> 直接引入后，可使用全局变量 UnibootUIIconsVue。
不同 CDN 引入方式略有差异，以下以 unpkg 与 jsDelivr 为例，也可换用其他 CDN。
<script src="//unpkg.com/@uniboot/icons-vue"></script><script src="//cdn.jsdelivr.net/npm/@uniboot/icons-vue"></script>TIP
通过 CDN 引入时建议在链接中锁定版本，避免后续 Uniboot UI 升级带来的不兼容变更。锁定方式见 unpkg.com。
自动导入
可结合 unplugin-icons 与 unplugin-auto-import 自动导入 iconify 图标集。
配置示例可参考 该模板。
简单示例
WARNING
HTML 标准中已存在 menu 标签，若直接注册名为 Menu 的图标组件将无法按预期渲染，需使用别名注册。
<!-- 使用 u-icon 向内部 SVG 传递尺寸、颜色等 -->
<template>
<div>
<u-icon :size="size" :color="color">
<Edit />
</u-icon>
<!-- 或单独使用图标组件，不继承外层属性 -->
<Edit />
</div>
</template>与 u-icon 组合
u-icon 可为原始 SVG 图标补充尺寸、颜色等属性，详见文末 API。
<template>
<p>增加 <b>is-loading</b> 类可在约 2 秒内旋转一圈，也可自行覆盖动画。</p>
<u-icon :size="20">
<Edit />
</u-icon>
<u-icon color="#409efc" class="no-inherit">
<Share />
</u-icon>
<u-icon>
<Delete />
</u-icon>
<u-icon class="is-loading">
<Loading />
</u-icon>
<u-button type="primary">
<u-icon style="vertical-align: middle">
<Search />
</u-icon>
<span style="vertical-align: middle"> Search </span>
</u-button>
</template>增加 is-loading 类可在约 2 秒内旋转一圈，也可自行覆盖动画。
直接使用 SVG 组件
<template>
<div style="font-size: 20px">
<!-- SVG 图标默认不带尺寸等属性，需自行设置 -->
<Edit style="width: 1em; height: 1em; margin-right: 8px" />
<Share style="width: 1em; height: 1em; margin-right: 8px" />
<Delete style="width: 1em; height: 1em; margin-right: 8px" />
<Search style="width: 1em; height: 1em; margin-right: 8px" />
</div>
</template>自定义 SVG
u-icon 的默认插槽不只限于 @uniboot/icons-vue，只要最终渲染出 <svg>（或其中有 svg），即可用 :size、:color 等与官方图标同样的方式组合使用。
内联 SVG
将 <svg> 直接写在插槽内即可。
<template>
<u-icon :size="24" color="#409efc">
<svg
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
aria-hidden="true"
>
<circle cx="12" cy="12" r="10" fill="currentColor" />
</svg>
</u-icon>
</template>自建图标组件
写一个根节点为 <svg> 的单文件组件（与 @uniboot/icons-vue 中图标结构类似），再引入并放入 u-icon。
<template>
<u-icon :size="20">
<MyLogo />
</u-icon>
</template>
<script lang="ts" setup>
import MyLogo from './icons/MyLogo.vue'
</script>从 .svg 文件导入
在 Vite 等环境中可借助 vite-svg-loader 等插件将单个 .svg 作为 Vue 组件导入，也可结合 import.meta.glob 批量注册；亦可沿用项目里已配置的 SVG 相关插件，得到组件后按上例放入 u-icon。
精灵图 / <symbol>（如 vite-plugin-svg-icons）
若使用 SVG Sprite（<svg><use href="#icon-xxx" /></svg>），同样可以外包一层 u-icon。能否随 color 变色取决于符号内部是否使用 currentColor 等可被继承的填色方式；硬编码 fill/stroke 时可能不会响应 u-icon 的 color。
TIP
需要图标跟随 u-icon 的 color 时，建议在 SVG 中对图形使用 fill="currentColor"（线图标则相应处理 stroke），以便继承外层 currentColor。
图标集合
TIP
任意版本均可使用 SVG 图标，只需安装对应包。
点击图标可复制名称。
API
属性
| 名称 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| color | 对应 SVG 的 fill | string | 继承文字颜色 |
| size | 图标宽高（正方形边长） | number / string | 继承 font-size |
插槽
| 名称 | 说明 |
|---|---|
| default | 自定义图标内容 |