第五十四章-Vite插件-vite-plugin-purge-icons

1.说明

本章的插件是可以让我们很方便高效的使用Iconify中所有的图标。

这里要讲的是Iconify各个版本插件的区别：

• Vue3版Iconify插件：使用时需要安装指定库的图标，然后静态引用。每一次引用都会产生一次http请求。
• PurgeIcons：将我们所使用的Iconify图标都已html的dom节点形式保存在html中，这样我们就可以不发送http请求就可以使用图标了。
• vite-plugin-purge-icons：就是Vite版的PurgeIcons。

vite-plugin-purge-icons的npm首页

2.安装

yarn add @iconify/iconify
yarn add vite-plugin-purge-icons @iconify/json --dev

3.配置Vite

build\vite\plugin\index.ts：

// ...
import PurgeIcons from 'vite-plugin-purge-icons';

export function createVitePlugins(viteEnv: ViteEnv, isBuild: boolean) {
  // ...
  // vite-plugin-purge-icons
  vitePlugins.push(PurgeIcons());

  // ...
  return vitePlugins;
}

4.注意

Icon组件后面再封装，由于我们main.ts中没有引入vite-plugin-purge-icons。所以，这里还不能使用。后面会动态生成图标。

上一章

第五十三章-Vite插件-vite-plugin-mock

下一章

第五十五章-Vite插件-vite-plugin-style-import