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

发布时间：2024-03-26 19:30:01 来源：互联网

.

在react + vite + ts项目中svg文件的基本使用 1、直接在JSX组件中引入SVG文件使用img标签，img标签的src代码嵌入到JSX组件中，

在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;