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 Refs 的使用forwardRef 源码示例解析
这篇文章主要为大家介绍了React 之 Refs 的使用和 forwardRef 的源码解读，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-11-11
React实现下拉框的key,value的值同时传送
这篇文章主要介绍了React实现下拉框的key,value的值同时传送方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-08-08
React中的Props类型校验和默认值详解
这篇文章主要为大家详细介绍了React中的Props类型校验和默认值，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助
2022-03-03
React-Router如何进行页面权限管理的方法
本篇文章主要介绍了React-Router如何进行页面权限管理的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-12-12
react 兄弟组件如何调用对方的方法示例
这篇文章主要介绍了react 兄弟组件如何调用对方的方法示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-10-10
如何对react hooks进行单元测试的方法
这篇文章主要介绍了如何对react hooks进行单元测试的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-08-08
React组件中的this的具体使用
这篇文章主要介绍了React组件中的this的具体使用，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-02-02
详解React Native项目中启用Hermes引擎
这篇文章主要为大家介绍了React Native项目中启用Hermes引擎实例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-09-09
react 路由Link配置详解
本文主要介绍了react 路由Link配置详解，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-11-11
React Hook之使用State Hook的方法
这篇文章主要为大家详细介绍了React使用State Hook的方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助
2022-03-03