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的图标

相关推荐
武昌库里写JAVA32 分钟前
39.剖析无处不在的数据结构
java·vue.js·spring boot·课程设计·宠物管理
Freedom风间4 小时前
前端优秀编码技巧
前端·javascript·代码规范
萌萌哒草头将军5 小时前
🚀🚀🚀 Openapi:全栈开发神器,0代码写后端!
前端·javascript·next.js
萌萌哒草头将军5 小时前
🚀🚀🚀 Prisma 爱之初体验:一款非常棒的 ORM 工具库
前端·javascript·orm
拉不动的猪5 小时前
SDK与API简单对比
前端·javascript·面试
runnerdancer5 小时前
微信小程序蓝牙通信开发之分包传输通信协议开发
前端
BillKu6 小时前
Vue3后代组件多祖先通讯设计方案
开发语言·javascript·ecmascript
山海上的风6 小时前
Vue里面elementUi-aside 和el-main不垂直排列
前端·vue.js·elementui
电商api接口开发6 小时前
ASP.NET MVC 入门指南二
前端·c#·html·mvc