Vite 安装 SVG 和 Icon: 完整指南

要在 Vite 中安装 SVG 和 Icon，你需要进行以下步骤：\n\n1. 首先，确保你已经在项目中安装了 Vite。如果没有，请在项目根目录下运行以下命令进行安装：\n\nnpm install vite --save-dev\n\n或者使用 yarn：\n\nyarn add vite --dev\n\n\n2. 确保你已经将 SVG 和 Icon 文件准备好，并放置在项目的合适位置。\n\n3. 在你的项目根目录下，创建一个vite.config.js文件。该文件用于配置 Vite 的行为。\n\n4. 在vite.config.js文件中，添加以下代码来配置 Vite 处理 SVG 和 Icon 文件的方式：\njavascript\nimport { defineConfig } from 'vite';\n\nexport default defineConfig({\n // ...其他配置\n\n // 配置 Vite 处理 SVG 和 Icon 文件的方式\n resolve: {\n alias: {\n // 将 SVG 文件的导入路径指向你的 SVG 文件所在的目录\n '@svg': '/path/to/svg/files',\n // 将 Icon 文件的导入路径指向你的 Icon 文件所在的目录\n '@icon': '/path/to/icon/files',\n },\n },\n});\n\n请将/path/to/svg/files和/path/to/icon/files替换为 SVG 和 Icon 文件所在的实际路径。\n\n5. 现在，你可以在你的项目中使用import语句来导入 SVG 和 Icon 文件了。例如，假设你有一个logo.svg文件和一个heart.svg文件，你可以这样导入它们：\njavascript\nimport { ReactComponent as Logo } from '@svg/logo.svg';\nimport { ReactComponent as HeartIcon } from '@svg/heart.svg';\n\n// 使用 Logo 和 HeartIcon 组件\n\n请注意，这里使用了ReactComponent导入 SVG 文件，这是因为 Vite 默认会将 SVG 文件编译为 React 组件。\n\n这样，你就可以在 Vite 中安装和使用 SVG 和 Icon 文件了。