[React] react + vite + ts项目中优雅使用.svg 文件

在react + vite + ts项目中svg文件的基本使用如1所示
1、直接在JSX组件中引入SVG文件，使用img标签，img标签的src代码嵌入到JSX组件中，例如：
// XXcomponent.tsx

import help_icon from '@/icon/help_icon.svg';
function MySVGComponent() {
return (
      <img src={help_icon} alt="" />
  );
}
export default MySVGComponent;

1这种使用方法有很多重复的代码，而且不好维护，我们希望至少能够重复使用引用一次的svg文件，将svg资源封装成组件，方法见2。
2、安装vite-plugin-svgr插件，修改配置，将SVG文件作为React组件导入

2.1 安装vite-plugin-svgr
npm i vite-plugin-svgr -D

2.2 在vite配置文件中注册已安装的vite-plugin-svgr插件
// vite.config.ts

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import svgr from "vite-plugin-svgr";

export default defineConfig({
    plugins: [react(), svgr()]
});

2.3 配置ts.config.json
// ts.config.json 添加"types": ["vite-plugin-svgr/client"] 这项配置

{
  "compilerOptions": {
      "types": ["vite-plugin-svgr/client"]
  }
}

2.4 使用
// XXcomponent.tsx

import { ReactComponent as HelpIcon } from '@/icon/help_icon.svg';
function MySVGComponent() {
  return (
      <HelpIcon />
  );
}
export default MySVGComponent;

3、在2的基础上进行封装，节省引入"path/to/icon_xx.svg"的步骤。
思路是将所有的icon_xx.svg放在src/icon 目录下
封装一个<SvgIcon /> 组件 <SvgIcon />的Props中iconName对应icon_xx.svg的名称。
import(@/icon/${iconName}.svg)

在需要使用svg的地方引入<SvgIcon />组件。
3这种思路有点类似于vue2中的svg-sprite-loader，只是没有注册在全局。

完结。

同步更新到自己的语雀
https://www.yuque.com/dirackeeko/blog/ebklt8wnof5ivs93