使用图标 (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-iconsbs-svg-图标丰富,作为 flexue 默认图标库,可支持替换,推荐使用
@element-plus/iconsel-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 图标库open in new window
- Element Plus 图标库open in new window
Last Updated:
Contributors: huanghaiquan
扫码咨询