使用图标 (Use Icons)
安装图标库
npm install --save flexue-icons@latest
导入图标库
在项目的入口文件(通常为sr/main.js
)中导入图标库。
import { FlexueIcons, ElIcons } from "flexue-icons";
//......
runApp(
"#page",
{
profile: "demo",
title: "Flexue演示",
},
// 初始化;
(context, vueApp) => {
// 注册 flexue 图标库; (推荐)
// 源自 bootstrap 5.0 的 SVG 图标库,总共 1953 枚图标,在 flexue 中被注册为 vue 组件供使用;
vueApp.use(FlexueIcons);
// 注册 element plus 的图标库;(可选)
vueApp.use(ElIcons);
}
);
使用图标
在 flexue 对引入的图标都进行了唯一命名,命名的方式为原图标名称加上特定的前缀,例如:针对 bootstrap icons 的命名前缀为 bs-svg-
, 那么对于图标 "circle" 在 flexue 中的名称为 “bs-svg-circle” 。
flexue-icons 当前版本(1.10.6)引入了下列图标库:
第三方图标库 | 命名前缀 | 说明 |
---|---|---|
bootstrap-icons | bs-svg- | 图标丰富,作为 flexue 默认图标库,可支持替换,推荐使用 |
@element-plus/icons | el-svg- | 数量较少,为了兼容 flexue 早期版本而保留,不推荐。 |
在应用中使用图标有 3 种方式:
通过 x-icon 组件
- 示例: x-icon 图标组件
<x-icon icon="bs-svg-circle-fill"></x-icon>
通过组件的 icon 属性或元数据指定图标
- 示例:为 Button 按钮指定图标
<x-button action-key="run" icon="bs-svg-circle-fill" pattern="icon" text="运行"></x-button>
直接使用 html 标签指定图标
- 示例:为 Button 按钮指定图标
<bs-svg-airplane color="red" width="64px" height="64px"></bs-svg-airplane>