好久没写笔记了，也好久没写代码了，最近在重新搞起始页，这次我想搞得离谱一些，以趣味性为主，这个笔记就是在这次开发中遇到的一个问题。

这次我用 Vite+React 对前端进行构建，但是在编写 Icon 组件的过程中，ReactComponent 没了，就是下面代码中的这个：

1
2
3
4
// Search Engine Icons
import { ReactComponent as BaiduLogo } from "../../assets/svg/searchEngineLogo/baidu.svg";
import { ReactComponent as GoogleLogo } from "../../assets/svg/searchEngineLogo/google.svg";
import { ReactComponent as BingLogo } from "../../assets/svg/searchEngineLogo/bing.svg";

ReactComponent 没法引入导致我得 Icon 无法实现导入 SVG 矢量图，在各种搜索之后找到以下解决方案：

  1. 在 package.json 中添加 vite-plugin-svgr 组件

    1
    yarn add -D vite-plugin-svgr

  2. 在项目中的 tsconfig.json 中添加配置：

    1
    2
    3
    4
    5
    6
    7
    {
      "compilerOptions": {
        "types": [
          "vite-plugin-svgr/client"
        ]
      }
    }

至此就完成了，但是还是觉得很离谱，Vite 构建的 React 项目把 ReactComponent 给干掉了

重新开始写代码，感觉让我回到了很久以前，今年有很长的一段时间我放下了代码，甚至看到就觉得恶心，但讽刺的是，现在我也只能在写代码的时候能得到一点平静，或许有些东西就是命中注定的？