关于前端: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