vite怎么安装svgicon

要在Vite中安装SVG和Icon，你需要进行以下步骤：

首先，确保你已经在项目中安装了Vite。如果没有，请在项目根目录下运行以下命令进行安装：

npm install vite --save-dev

或者使用 yarn：

yarn add vite --dev

确保你已经将SVG和Icon文件准备好，并放置在项目的合适位置。
在你的项目根目录下，创建一个vite.config.js文件。该文件用于配置Vite的行为。
在vite.config.js文件中，添加以下代码来配置Vite处理SVG和Icon文件的方式：

import { defineConfig } from 'vite';

export default defineConfig({
  // ...其他配置

  // 配置Vite处理SVG和Icon文件的方式
  resolve: {
    alias: {
      // 将SVG文件的导入路径指向你的SVG文件所在的目录
      '@svg': '/path/to/svg/files',
      // 将Icon文件的导入路径指向你的Icon文件所在的目录
      '@icon': '/path/to/icon/files',
    },
  },
});

请将/path/to/svg/files和/path/to/icon/files替换为SVG和Icon文件所在的实际路径。

现在，你可以在你的项目中使用import语句来导入SVG和Icon文件了。例如，假设你有一个logo.svg文件和一个heart.svg文件，你可以这样导入它们：

import { ReactComponent as Logo } from '@svg/logo.svg';
import { ReactComponent as HeartIcon } from '@svg/heart.svg';

// 使用Logo和HeartIcon组件

请注意，这里使用了ReactComponent导入SVG文件，这是因为Vite默认会将SVG文件编译为React组件。

这样，你就可以在Vite中安装和使用SVG和Icon文件了