本文主要是介绍Vue 3使用 Iconify 作为图标库与 Icones 开源在线图标浏览库的使用，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
之前一直naive-ui搭配使用的是xicons，后来发现Iconify支持的图标合集更多，因此转而使用Iconify。
与FontAwesome不同的是，Iconify配合Icones相当于是一个合集，Iconify提供了快捷引入图标的方式，而Icones是一个大的图标库，收集了大量MIT协议、Apache 2.0开源的图标文件。
Iconify 支持的框架很多，本文以 Vue 3 作为介绍。
官网地址：
https://icones.js.org/
Iconify Design: All popular icon sets, one framework.
一、安装
npm install --save-dev @iconify/vue如果使用yarn作为依赖管理，则使用
yarn add --dev @iconify/vue
二、在 Icones 查找所需的图标
选择一个准备使用的图标套装，找到需要的图标后，点击复制：
三、插入图标
import { Icon } from '@iconify/vue';// template中插入
<Icon icon="mdi-light:home" />
效果：
这篇关于Vue 3使用 Iconify 作为图标库与 Icones 开源在线图标浏览库的使用的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
