在 uniapp 项目中使用 Iconify 字体图标库

最新推荐文章于 2025-03-24 08:17:56 发布

廖若星辰LTY

最新推荐文章于 2025-03-24 08:17:56 发布

阅读量858

点赞数 2

文章标签： uni-app 前端

本文链接：https://blog.csdn.net/qq_43551801/article/details/144180449

版权

本文示例在 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" />