Iconify是什么？
Iconify是一个基于svg跟图标相关的开源项目，收录了一百多个开源图标合集，跟阿里的iconfont类似。
如果说阿里的iconfont像逛超市一样，挑好了（收藏成一个项目）去前台买单（下载），然后回家收拾（解压），吃掉（使用）。
那么Iconify的就像点外卖（选择图标合集）一样，送货上门（npm下载）直接在家吃（使用）。
Iconify的优势：
1、下载使用方便。Iconify可以通过npm来使用图标集，而阿里要通过网站下载压缩包。
2、通用的规范。Iconify提供了一个svg的规范，通过IconifyIcon、IconifyJSON等类型的规范，把svg组成的图标集抽象成体积比较小的文件通过npm下载到本地来按需加载按需打包。
Iconify的劣势：
1、生态不够大。阿里的iconfont目前有两千三百万图标，而Iconify只有十五万的图标。
Iconify如何使用？
使用的话主要是通过几个插件来使用（其他地方使用可以查看：https://github.com/antfu/unplugin-icons）：
1、unplugin-icons：一个导入图标的插件，提供自动按需导入Iconify图标集，按需加载，自定义本地图标集等功能。
2、Iconify：图标数据源
3、unplugin-vue-components：Vue 的按需组件自动导入
目标1：使用本地svg图标集
安装unplugin-icons
npm i -D unplugin-icons
安装unplugin-vue-components
npm i unplugin-vue-components -D
在vite.config.js里引入
import Components from 'unplugin-vue-components/vite'
import Icons from 'unplugin-icons/vite'
import { FileSystemIconLoader } from 'unplugin-icons/loaders'
import IconsResolver from 'unplugin-icons/resolver'
export default defineConfig({
...
plugins: [
Components({
resolvers: [
IconsResolver({
// prefix: false,
enabledCollections: ['my'],
})
],
}),
Icons({
compiler: "vue3",
autoInstall: true,
customCollections: {
'my': FileSystemIconLoader('./src/assets/svg', svg => svg.replace(/^<svg /, '<svg fill="currentColor" '))
}
})
]
...
}）
在组件里使用（四种写法），使用规则是{prefix}-{my}-{add}。prefix没写默认是i，如果prefix是false的话则是<my-add />、<myAdd />、 <MyAdd />。my是设置在vite.config.js的集合名称。add是目录里面的svg文件名称。
<script setup >
import Add from '~icons/my/add';
</script>
<template>
<Add />
<IMyAdd />
<i-my-add />
<I-My-Add />
</template>
效果
目标2：使用Iconify里的图标
安装Iconify图标集
第一种，全部安装
npm i -D @iconify/json
第二种安装某一个图标集
到https://icon-sets.iconify.design/搜索你想要的图标，然后点击获取信息
安装你想要的集合，比如我选的是ic集合
//npm i -D @iconify-json/集合名称 npm i -D @iconify-json/ic
使用Iconify图标集
到vite.config.js里添加集合名称
...
Components({
resolvers: [
IconsResolver({
// prefix: false,
enabledCollections: ['my'，‘ic’],//添加上集合名称ic
})
],
}),
...
在组件中使用
<script setup >
import Add from '~icons/my/add';
import Add2 from '~icons/ic/baseline-add-circle-outline';
</script>
<template>
<Add />
<IMyAdd />
<i-my-add />
<I-My-Add />
//ic集合里的图标
<Add2 />
<IIcBaselineAddCircleOutline />
<i-ic-baseline-add-circle-outline />
<I-Ic-Baseline-Add-Circle-Outline />
</template>
效果
