使用图标 (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>

x-icon 组件参考

通过组件的 icon 属性或元数据指定图标

• 示例：为 Button 按钮指定图标

<x-button action-key="run" icon="bs-svg-circle-fill" pattern="icon" text="运行"></x-button>

x-button 组件参考

直接使用 html 标签指定图标

• 示例：为 Button 按钮指定图标

<bs-svg-airplane color="red" width="64px" height="64px"></bs-svg-airplane>

图标库链接

- Bootstrap Icons 图标库

- Element Plus 图标库