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

1.说明

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

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

  • Vue3版Iconify插件:使用时需要安装指定库的图标,然后静态引用。每一次引用都会产生一次http请求。
  • PurgeIcons:将我们所使用的Iconify图标都已htmldom节点形式保存在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

# vben  vite 

评论

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×