unocss+iconify技术在vue项目中使用20000+的图标

安装依赖

复制代码
npm i unocss @iconify/json

配置依赖

vue.config.js文件

uno.config.js文件

main.js文件

使用

html 复制代码
<i class="i-fa:user"></i>
<i class="i-fa:key"></i>

class名是 i- 开头,跟库名:图标名,那都有什么库?什么图标?

https://icones.js.org/

找几个看看


记得加 i-
i-库名:图标名

效果

看,是异步加载svg的图标

相关推荐
天蓝色的鱼鱼16 分钟前
都2026年了还不会Vite插件开发?手写一个版本管理插件,5分钟包会!
前端·vite
苏武难飞27 分钟前
分享一个33号远征队的效果!
前端
鹏程十八少1 小时前
4.Android 30分钟手写一个简单版shadow, 从零理解shadow插件化零反射插件化原理
android·前端·面试
亿元程序员1 小时前
这款值68亿的游戏,你不实战一下吗?安排!
前端
摸鱼的春哥2 小时前
Agent教程15:认识LangChain(中),状态机思维
前端·javascript·后端
明月_清风2 小时前
告别遮挡:用 scroll-padding 实现优雅的锚点跳转
前端·javascript
明月_清风2 小时前
原生 JS 侧边栏缩放:从 DOM 监听到底层优化
前端·javascript
万少11 小时前
HarmonyOS 开发必会 5 种 Builder 详解
前端·harmonyos
橙序员小站13 小时前
Agent Skill 是什么?一文讲透 Agent Skill 的设计与实现
前端·后端
炫饭第一名15 小时前
速通Canvas指北🦮——基础入门篇
前端·javascript·程序员