react+vite 中如何自定义icon引用及应用详细的过程

在React应用中结合Vite使用自定义图标通常涉及以下几个步骤：

1. **安装依赖**：
首先，你需要安装`@vitejs/plugin-svg-icons`插件，它可以帮助我们导入并管理SVG图标。可以在Vite项目的根目录运行：

   npm install @vitejs/plugin-svg-icons --save-dev

2. **配置Vite**：
在`.viteignore`文件中添加`.svg`到忽略列表之外，以便Vite能处理SVG文件。然后，在`vite.config.js`中引入并启用插件：

   import { createVuePlugin } from '@vitejs/plugin-vue';
   import IconsPlugin from '@vitejs/plugin-svg-icons';

   export default {
     plugins: [
       createVuePlugin(),
       IconsPlugin({
         // 根据需要设置路径，例如 'src/icons' 或者 'public/assets'
         iconDirs: ['src/icons'],
         // 输出导出的图标名
         fileName: 'icons/[name].js',
         // 如果你想对图标做进一步处理，可以提供预处理器函数
         // preProcessor: icons => {
         //   // ...
         // },
       }),
     ],
     // ...其他配置...
   };

3. **创建SVG图标**：
在`src/icons`目录下创建SVG文件，比如`my-icon.svg`，编写图标内容。

4. **引用图标**：
在React组件中，你可以通过导入生成的JavaScript模块来引用图标：

   import MyIcon from '@/icons/my-icon';

   function MyComponent() {
     return <MyIcon />;
   }

Vite会自动将SVG转换成ES6模块供你使用。

5. **动态加载或按需引入**：
如果你只需要在某些场景下使用某个图标，可以考虑使用动态导入或按需引入库如`react-import-auto-loader`。

6. **样式管理**：
可以考虑将图标打包进CSS Sprites或使用专门的图标字体库，以减少HTTP请求次数。