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中如何使用局部样式
这篇文章主要介绍了react中如何使用局部样式问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2023-10-10
React中常见的TypeScript定义实战教程
这篇文章主要介绍了React中常见的TypeScript定义实战,本文介绍了Fiber结构，Fiber的生成过程，调和过程，以及 render 和 commit 两大阶段，需要的朋友可以参考下
2022-10-10
React styled-components设置组件属性的方法
这篇文章主要介绍了styled-components设置组件属性的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-08-08
Native Memory Tracking追踪区域示例分析
这篇文章主要为大家介绍了Native Memory Tracking追踪区域示例分析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-11-11
Vite+React搭建开发构建环境实践记录
这篇文章主要介绍了Vite+React搭建开发构建环境实践,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2022-09-09
React里的Fragment标签的具体使用
本文主要介绍了React里的Fragment标签的具体使用，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2023-01-01
React Hooks获取数据实现方法介绍
这篇文章主要介绍了react hooks获取数据,文中给大家介绍了useState dispatch函数如何与其使用的Function Component进行绑定，实例代码给大家介绍的非常详细，需要的朋友可以参考下
2022-10-10
React新文档切记不要滥用effect
这篇文章主要为大家介绍了React新文档滥用effect出现的问题详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-07-07
React手写redux过程分步讲解
这篇文章主要介绍了React手写redux过程，目前redux在react中使用是最多的，所以我们需要将之前编写的redux代码，融入到react当中去，本文给大家详细讲解，需要的朋友可以参考下
2022-12-12
React父组件数据实时更新了,子组件没有更新的问题
这篇文章主要介绍了React父组件数据实时更新了,子组件没有更新的问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2024-03-03