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组件三大属性之state,props,refs,文章围绕主题展开详细的内容介绍，具有一定的参考价值，需要的小伙伴可以参考一下2022-07-07
用表格进行页面布局,页面布局在各种浏览器的的兼容性, 本文主要介绍了详解React中合并单元格的正确写法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-01-01
react中hooks使用useState的更新不触发dom更新问题及解决
这篇文章主要介绍了react中hooks使用useState的更新不触发dom更新问题及解决,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-01-01
本文主要介绍了React 三大核心属性，主要包括State属性，Props属性，Refs属性，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-02-02
本文主要介绍了深入理解React协调与调度(Scheduler)原理，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习吧2022-10-10
这篇文章主要介绍了详解react关于事件绑定this的四种方式，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-03-03
这篇文章主要介绍了React Router v4 入坑指南(小结)，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-04-04
这篇文章主要介绍了React中多语言的配置方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-06-06
这篇文章主要介绍了React中的不可变值的相关资料，帮助大家更好的理解和学习使用react.js，感兴趣的朋友可以了解下2021-04-04
这篇文章主要介绍了详解使用WebPack搭建React开发环境，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-08-08
最新评论