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

更新时间：2023年08月25日 11:00:12 作者：DiracKeeko

这篇文章主要为大家介绍了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的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

react-redux的connect与React.forwardRef结合ref失效的解决
这篇文章主要介绍了react-redux的connect与React.forwardRef结合ref失效的解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-05-05
React倒计时功能实现代码——解耦通用
这篇文章主要介绍了React倒计时功能实现——解耦通用,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2020-09-09
React组件间通信的三种方法（简单易用）
React知识中一个主要内容便是组件之间的通信，以下列举几种常用的组件通信方式，本文就详细的介绍一下，感兴趣的可以了解一下
2021-10-10
解决react-connect中使用forwardRef遇到的问题
这篇文章主要介绍了解决react-connect中使用forwardRef遇到的问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-05-05
React传递参数的几种方式
本文详细的介绍了React传递参数的几种方式，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2021-06-06
React性能优化的实现方法详解
react凭借virtual DOM和diff算法拥有高效的性能，除此之外也有很多其他的方法和技巧可以进一步提升react性能，在本文中我将列举出可有效提升react性能的几种方法，帮助我们改进react代码，提升性能
2023-01-01
浅谈React Native 中组件的生命周期
本篇文章主要介绍了浅谈React Native 中组件的生命周期，非常具有实用价值，需要的朋友可以参考下
2017-09-09
React+高德地图实时获取经纬度,定位地址
思路其实没有那么复杂，把地图想成一个盒子容器，地图中心点想成盒子中心点；扎点在【地图中心点】不会动，当移动地图时，去获取【地图中心点】经纬度，设置某个位置的时候，将经纬度设置为【地图中心点】即可
2021-06-06
react源码合成事件深入解析
这篇文章主要为大家介绍了react源码合成事件深入解析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-01-01
React18之状态批处理的使用
本文主要介绍了React18之状态批处理的使用，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2022-05-05