Iconify图标

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>

效果