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

安装依赖

npm i unocss @iconify/json

配置依赖

vue.config.js文件

unocss+iconify技术在vue项目中使用20000+的图标_第1张图片

uno.config.js文件

unocss+iconify技术在vue项目中使用20000+的图标_第2张图片

main.js文件

unocss+iconify技术在vue项目中使用20000+的图标_第3张图片

使用

<i class="i-fa:user">i>
<i class="i-fa:key">i>

class名是 i- 开头,跟库名:图标名,那都有什么库?什么图标?
在https://icones.js.org/
unocss+iconify技术在vue项目中使用20000+的图标_第4张图片

找几个看看

unocss+iconify技术在vue项目中使用20000+的图标_第5张图片

unocss+iconify技术在vue项目中使用20000+的图标_第6张图片

unocss+iconify技术在vue项目中使用20000+的图标_第7张图片
记得加 i-
i-库名:图标名

效果

看,是异步加载svg的图标
unocss+iconify技术在vue项目中使用20000+的图标_第8张图片

你可能感兴趣的:(辅助撸码,vue.js,前端,javascript)