vite-plugin-svg-icons和阿里图标库的配合使用

Vite-plugin-svg-icons是一个用于Vite项目的插件，它可以帮助你在前端项目中轻松管理和使用SVG矢量图文件，如阿里巴巴图标库提供的矢量图标。这个插件的主要功能是将SVG图标转换成更小、更快的Web字体格式（`.svg`转 `.ttf` 或 `.woff`），然后在需要的地方通过CSS类名引用，实现快速加载和高效的性能。

以下是配合使用的步骤：

1. **安装插件**：首先在Vite项目中安装vite-plugin-svg-icons，通常使用npm或yarn：

   npm install vite-plugin-svg-icons

2. **配置Vite**：在`vite.config.js`中引入并配置该插件，例如：

   import { defineConfig } from 'vite';
   import svgIcons from 'vite-plugin-svg-icons';

   export default defineConfig({
     plugins: [svgIcons({ dest: 'public/icons', include: ['@ant-design/icons'] })],
   });

这里设置了生成图标的目标目录`public/icons`，并且只包含来自`@ant-design/icons`库内的图标。

3. **在HTML或组件中使用**：现在可以在模板中通过CSS类引用 icons，比如：

   <i class="iconfont icon-search"></i>

`iconfont`是阿里图标库的前缀，`icon-search`是由`@ant-design/icons`插件生成的实际图标类名。