安装依赖
npm i unocss @iconify/json
配置依赖
vue.config.js文件
uno.config.js文件
main.js文件
使用图标
<i class="i-fa:user"></i>
<i class="i-fa:key"></i>
使用公式 i-库名:图标名
,class名是 i-
开头,跟库名:图标名
,那都有什么库?什么图标?在https://icones.js.org/
找几个看看
记得加 i-
哦,i-库名:图标名
效果
看,是异步加载svg的图标
动态渲染的问题
动态渲染的标签出不来图标,比如动态渲染的权限菜单栏、或者js创建的标签出不来,不过也有解决办法,就2步
下载到本地
建议下载图标比较多的、全面的图库,因为这样使用选择的范围就广泛,比如arcticons、Phosphor 、Pictogrammers、solar等
自己处理成 ["i-库名:图标名", "i-库名:图标名", "i-库名:图标名"]
这种格式的 json
配置uno safelist
我以FontAwesome4为例:
文章来源:https://www.toymoban.com/news/detail-807738.html
出来了
文章来源地址https://www.toymoban.com/news/detail-807738.html
到了这里,关于unocss+iconify技术在vue项目中使用20000+的图标的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!