关于前端:React-react-vite-ts项目中优雅使用svg-文件

40次阅读

共计 1179 个字符，预计需要花费 3 分钟才能阅读完成。

在 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

正文完