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的资料请关注脚本之家其它相关文章！
相关文章
Node-sass是一个库,它将Node.js绑定到LibSass（流行样式表预处理器Sass的C版本）,它允许用户以令人难以置信的速度将.scss文件本地编译为css,并通过连接中间件自动编译,下面这篇文章主要给大家介绍了关于React安装node-sass失败解决的相关资料,需要的朋友可以参考下2022-11-11
本篇文章主要介绍了react-native 圆弧拖动进度条实现的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-04-04
这篇文章主要介绍了react diff算法源码解析的相关资料，帮助大家更好的理解和学习使用react，感兴趣的朋友可以了解下2021-04-04
这篇文章主要介绍了React 18版本配置rem 和 vw的详细步骤,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧2024-01-01
这篇文章主要介绍了React Navigation 路由传参,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2023-08-08
这篇文章主要介绍了react配合antd组件实现的管理系统示例代码,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-04-04
这篇文章主要介绍了搭建React Native热更新平台,要实现 React Native 热更新功能，有四种思路 Code Push、Pushy、Expo 和自研，感兴趣的朋友一起通过本文学习吧2022-05-05
本篇文章主要介绍了React-router 4 按需加载的实现方式及原理详解，非常具有实用价值，需要的朋友可以参考下2017-05-05
这篇文章主要介绍了React如何使用sortablejs实现拖拽排序问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-01-01
这篇文章主要介绍了React中setState的异步操作案例详解，文章围绕主题展开详细的内容介绍，具有一点点参考价值，感兴趣的小伙伴可以参考一下2022-08-08
最新评论