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

在react + vite + ts项目中svg文件的基本使用

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、节省引入"path/to/icon_xx.svg"

在2的基础上进行封装，节省引入"path/to/icon_xx.svg"的步骤。

思路是将所有的icon_xx.svg放在src/icon 目录下
封装一个<SvgIcon /> 组件 <SvgIcon />的Props中iconName对应icon_xx.svg的名称。

import(@/icon/${iconName}.svg)

在需要使用svg的地方引入<SvgIcon />组件。

这种思路有点类似于vue2中的svg-sprite-loader，只是没有注册在全局。

以上就是react + vite + ts项目中优雅使用.svg文件的详细内容，更多关于react vite ts使用.svg的资料请关注脚本之家其它相关文章！