如何在 Unibest 中使用 Iconfont 图标库

23 min read

Iconfont 是阿里巴巴提供的矢量图标库，具有海量的图标资源，同时支持上传自定义图标，常用于公司项目中，由专业设计师设计定制的图标可以通过 Iconfont 快速接入。在 Unibest 中使用 Iconfont 非常方便，以下是具体的操作步骤。

1. 登录并获取图标

首先，访问 阿里巴巴矢量图标库 Iconfont，并使用您的账号登录。

步骤：

  • 打开 Iconfont 网站，搜索或浏览需要的图标。
  • 将所选图标加入您的项目，若公司有专属图标库，也可以上传自己的图标。

2. 设置图标库

在项目设置中，选择Font class形式来引用图标，并确保勾选Base64选项（此选项可以确保图标在非 H5 端环境下依旧有效）。点击生成链接，将生成的样式代码复制下来。

步骤：

  • 选择 Font class 作为图标调用方式。
  • 勾选Base64以支持多端。
  • 点击生成并复制生成的 CSS 链接。

3. 在 Unibest 项目中引入图标库

将复制的 CSS 链接中的内容保存为一个本地的样式文件，例如 iconfont.css，并将其引入项目中。

步骤：

  • 在项目的 style 目录下创建 iconfont.css 文件。
  • 将复制的 CSS 内容粘贴到 iconfont.css 文件中。
  • 在项目的全局样式文件中（例如 style/index.scss）引入 iconfont.css。
@import './iconfont.css';

4. 使用图标

在页面中使用图标时，通过添加相应的 iconfont 类和图标名称即可。例如，以下代码将展示几个常用图标：

<view class="m-4">
  <text mr-2>iconfont:</text>
  <i class="iconfont icon-package text-red"></i>
  <i class="iconfont icon-chat text-red"></i>
  <i class="iconfont icon-my text-red"></i>
</view>

其中，icon-package、icon-chat、icon-my 是在 Iconfont 中选择的图标名称，text-red 是设置图标为红色的样式。

动态图标：

通过使用动态数据，可以实现图标的动态切换。使用 Vue.js 的 ref 或其他响应式变量，动态修改图标类名：

const iconName = ref<string>('icon-package');

onLoad(() => {
  setTimeout(() => {
    iconName.value = 'icon-chat';
  }, 1000);
});

HTML 中动态使用图标：

<view :class="`iconfont ${iconName}`"></view>

5. 预览效果

在开发环境中保存并刷新页面后，您将看到图标成功显示。图标的颜色和大小可以通过标准的 CSS 样式进行控制，例如：

<i class="iconfont icon-package text-red" style="font-size: 24px;"></i>

总结

在 Unibest 中使用 Iconfont 图标库非常简单，只需通过 Iconfont 平台获取所需图标，导入生成的 CSS 文件，并通过 iconfont 类名直接使用图标。动态图标切换和样式调整也非常方便，推荐在项目中使用 Iconfont 来管理和展示图标。

这就是如何在 Unibest 中快速集成和使用 Iconfont 图标库的方法。