本文示例在 uniapp 项目中对 Iconify 字体图标库的安装和使用（Iconify 字体图标库是一个免费开源的图标库，它拥有超过20万个开源矢量图标。）

注：本文示例使用的是其 vue3 版本

安装

npm install --save-dev @iconify/vue

注：本示例安装的是 vue3 的版本，如果你需要安装其他框架或其他版本请参考官方文档

使用

导入 Icon 组件

import { Icon } from '@iconify/vue';

使用字体图标

<!-- 第一种使用方式：使用 css 样式控制大小和颜色（个人更推荐，可以使用 rpx 单位） -->
<Icon icon="ix:light-dark" style="color: deepskyblue; font-size: 66rpx;" />
<br />
<!-- 第二种使用方式：可以使用 attribute 的方式定义大小和颜色（注：经测试宽高单位不支持 rpx ） -->
<Icon icon="ix:light-dark" width="40px" height="40px" color="#007aff" />

效果图

更换图标

在官方搜索页可以根据关键词检索你需要的图标，选定你需要的图标后你可以调整它的大小、颜色以多种方式去使用它，比如下载为 PNG 图片或使用它的 CSS 方式，如果你使用的是本示例的组件方式则复制它的 icon-name 填充到 Icon 组件的 icon 属性上即可。

最后，感谢你看到这里，若有疑问或错误欢迎留言或私信。祝你家庭美满、工作顺利！