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

时间:2024-12-04 17:43:50

本文示例在 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 属性上即可。

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