react-svg引入路径错误 排坑

最新推荐文章于 2025-12-01 18:19:05 发布
原创 最新推荐文章于 2025-12-01 18:19:05 发布 · 1.3k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#javascript #svg #react #node

本文介绍如何使用ReactSVG组件正确地引入SVG图标，并提供了一个具体的代码示例。文章强调了使用require进行src路径指定的重要性，避免引入过程中出现的问题。

react-svg使用

  1. npm i react-svg -s
  2. import {ReactSVG} from ‘react-svg’ svg引入一样要这样引入否则报错
  3. 引入src 应定要require 引入，官网直接引入不加载svg
    <ReactSVG src={require(@/assets/icons/svg/${icon}.svg)}/>
  4. react-svg npm地址
    npm 地址有使用参数，不懂得小伙伴欢迎留言哈。
Vite与React-InlineSVG的完美结合：解决SVG引入问题
2501_90323865的博客
12-16 10
本文介绍了在Vite构建的React应用中使用react-inlinesvg库加载SVG文件的方法。针对常见的"无法将对象转换为基本值"错误，提供了解决方案：安装vite-require插件并配置Vite，修改代码添加.default获取模块默认导出。通过实例演示了如何根据主题动态加载不同SVG文件，确保SVG在React组件中正确显示。该方法解决了Vite环境下react-inlinesvg的使用问题，提升了开发效率。
React Native报错Unable to resolve module的路径别名配置解决方案
shejizuopin的博客
05-28 1230
React Native开发中遇到"Unable to resolve module"错误时，主要原因是路径配置问题或缓存异常。解决方案包括：1)检查模块路径和安装状态；2)配置路径别名，通过babel-plugin-module-resolver插件设置Babel和TypeScript的路径映射；3)清除Metro缓存并重新安装依赖。对于复杂项目，还需注意React Native版本兼容性和iOS项目的.xcworkspace文件使用。通过系统化检查路径配置、清除缓存和版本适配，可有效
react svg 通过路径实现非系统的自定义字体的显示
qq_41411483的博客
01-15 472
在给前端界面做文字遮罩动画时，考虑到兼容性，我采用了svg的方法，而不是css的方法。总体来说效果还是不错的，如下所示 但是奇怪的是，非系统自定义字体在组件刚创建的时候总是不显示，甚至一片空白，只有在调试页面中，更改字体才会显示上面的效果。 起初查了很多关于svg自定义字体的解决方法，发现不奏效，所以我采用了另一种方法，通过path路径的方法。 但是上面这么复杂的路径怎么解决呢？ 通过Adobe Inlustrator，它是做矢量图形的好软件，同时也能生成svg文件，这个功能拓宽了我前端开发的设计。 1、
react svg 导入错误
判断一个点是否在闭合曲线内
11-20 1444
在react组件中import这有由于没有找到svg文件的声明，可以用如下方法解决。
React-SVG 使用指南
最新发布
gitblog_01058的博客
12-01 1433
--- ## 项目介绍 React-SVG 是一个简洁的库，专为希望在 React 应用中无缝集成和操作 Scalable Vector Graphics (SVG) 的开发者设计。它使得导入、渲染以及动态管理 SVG 图像变得轻而易举，极大地增强了开发者的体验和提升了网站的交互性及视觉效果。通过这个工具，开发人员可以更灵活地处理 SVG，享受更好的可扩展性和优化后的文件大小。 --- #
React中使用addWebpackAlias配置导入路径报错
pgLi
06-09 4226
一、环境： 1、React + TypeScript 2、使用create-react-app搭建的项目 { "name": "react-customizescreen", "version": "0.1.0", "private": true, "dependencies": { "@testing-library/jest-dom": "^4.2.4", "@testing-library/react": "^9.3.2", "@testing-li..
React中的SVG陷阱
weixin_26750481的博客
09-10 678
react svgWhen we want to use SVG image in React, we may import it like this: 当我们想在React中使用SVG图像时，我们可以这样导入它: import {ReactComponent as Logo} from "./logo.svg";In my project, the logo.svg is a X for us...
【亲测免费】 推荐使用：react-svg —— 动态注入SVG到React应用的利器
gitblog_00058的博客
05-17 1164
`react-svg` 是一个高效且实用的React组件，它能帮你将远程或本地的SVG资源动态地注入到你的DOM中，通过代理[@tanem/svg-injector](https://github.com/tanem/svg-injector)库来实现这一功能。这个库不仅支持SVG的异步加载和缓存，还提供了多种自定义选项，让你可以灵活控制SVG元素在页面上的表现。 ## 项目技术分析 `rea...
前端项目-react-inlinesvg.zip
09-03
在上面的代码中，`src`属性指定了SVG文件的路径，当组件渲染时，"react-inlinesvg"会自动将SVG内容转换为内联样式，并插入到DOM中。 "react-inlinesvg"还提供了一些额外的功能，比如预加载SVG、错误处理、自定义...
react-native-art画二次贝塞尔曲线实现
xiongqiangwin1314的专栏
12-19 7083
1、关于react-native ART库的使用，目前网上能搜到的少之又少，简书上的一篇react-native-art 绘图入门，从基本上讲解了一下react-native-art的使用方法，但是只是简单的横竖曲线的绘制，但项目中有一个需求就是绘制网速的速率曲线， （项目最终效果） 那么如果按照react-native-art绘图入门上给的寥寥几个接口是不可能实现画出一个平滑曲线的目
D:\AwesomeProject> npx react-native start --reset-cache warn Package stream-browserify has been ignored because it contains invalid configuration. Reason: Cannot find module 'stream-browserify\package.json' Require stack: - D:\AwesomeProject\node_modules\@react-native-community\cli\node_modules\@react-native-community\cli-tools\build\resolveNodeModuleDir.js - D:\AwesomeProject\node_modules\@react-native-community\cli\node_modules\@react-native-community\cli-tools\build\releaseChecker\index.js - D:\AwesomeProject\node_modules\@react-native-community\cli\node_modules\@react-native-community\cli-tools\build\index.js - D:\AwesomeProject\node_modules\@react-native-community\cli\build\tools\config\resolveNodeModuleDir.js - D:\AwesomeProject\node_modules\@react-native-community\cli\build\tools\config\resolveReactNativePath.js - D:\AwesomeProject\node_modules\@react-native-community\cli\build\tools\config\index.js - D:\AwesomeProject\node_modules\@react-native-community\cli\build\commands\install\install.js - D:\AwesomeProject\node_modules\@react-native-community\cli\build\commands\index.js - D:\AwesomeProject\node_modules\@react-native-community\cli\build\index.js - D:\AwesomeProject\node_modules\@react-native-community\cli\build\bin.js warn Package dns.js has been ignored because it contains invalid configuration. Reason: Cannot find module 'dns.js\package.json' Require stack: - D:\AwesomeProject\node_modules\@react-native-community\cli\node_modules\@react-native-community\cli-tools\build\resolveNodeModuleDir.js - D:\AwesomeProject\node_modules\@react-native-community\cli\node_modules\@react-native-community\cli-tools\build\releaseChecker\index.js - D:\AwesomeProject\node_modules\@react-native-community\cli\node_modules\@react-native-community\cli-tools\build\index.js - D:\AwesomeProject\node_modules\@react-native-community\cli\build\tools\config\resolveNodeModuleDir.js - D:\AwesomeProject\node_modules\@react-native-community\cli\build\tools\config\resolveReactNativePath.js - D:\AwesomeProject\node_modules\@react-native-community\cli\build\tools\config\index.js - D:\AwesomeProject\node_modules\@react-native-community\cli\build\commands\install\install.js - D:\AwesomeProject\node_modules\@react-native-community\cli\build\commands\index.js - D:\AwesomeProject\node_modules\@react-native-community\cli\build\index.js - D:\AwesomeProject\node_modules\@react-native-community\cli\build\bin.js warn Package react-native-level-fs has been ignored because it contains invalid configuration. Reason: Cannot find module 'react-native-level-fs\package.json' Require stack: - D:\AwesomeProject\node_modules\@react-native-community\cli\node_modules\@react-native-community\cli-tools\build\resolveNodeModuleDir.js - D:\AwesomeProject\node_modules\@react-native-community\cli\node_modules\@react-native-community\cli-tools\build\releaseChecker\index.js - D:\AwesomeProject\node_modules\@react-native-community\cli\node_modules\@react-native-community\cli-tools\build\index.js - D:\AwesomeProject\node_modules\@react-native-community\cli\build\tools\config\resolveNodeModuleDir.js - D:\AwesomeProject\node_modules\@react-native-community\cli\build\tools\config\resolveReactNativePath.js - D:\AwesomeProject\node_modules\@react-native-community\cli\build\tools\config\index.js - D:\AwesomeProject\node_modules\@react-native-community\cli\build\commands\install\install.js - D:\AwesomeProject\node_modules\@react-native-community\cli\build\commands\index.js - D:\AwesomeProject\node_modules\@react-native-community\cli\build\index.js - D:\AwesomeProject\node_modules\@react-native-community\cli\build\bin.js warn Package react-native-tcp has been ignored because it contains invalid configuration. Reason: Cannot find module 'react-native-tcp\package.json' Require stack: - D:\AwesomeProject\node_modules\@react-native-community\cli\node_modules\@react-native-community\cli-tools\build\resolveNodeModuleDir.js - D:\AwesomeProject\node_modules\@react-native-community\cli\node_modules\@react-native-community\cli-tools\build\releaseChecker\index.js - D:\AwesomeProject\node_modules\@react-native-community\cli\node_modules\@react-native-community\cli-tools\build\index.js - D:\AwesomeProject\node_modules\@react-native-community\cli\build\tools\config\resolveNodeModuleDir.js - D:\AwesomeProject\node_modules\@react-native-community\cli\build\tools\config\resolveReactNativePath.js - D:\AwesomeProject\node_modules\@react-native-community\cli\build\tools\config\index.js - D:\AwesomeProject\node_modules\@react-native-community\cli\build\commands\install\install.js - D:\AwesomeProject\node_modules\@react-native-community\cli\build\commands\index.js - D:\AwesomeProject\node_modules\@react-native-community\cli\build\index.js - D:\AwesomeProject\node_modules\@react-native-community\cli\build\bin.js warn Package react-native-os has been ignored because it contains invalid configuration. Reason: Cannot find module 'react-native-os\package.json' Require stack: - D:\AwesomeProject\node_modules\@react-native-community\cli\node_modules\@react-native-community\cli-tools\build\resolveNodeModuleDir.js - D:\AwesomeProject\node_modules\@react-native-community\cli\node_modules\@react-native-community\cli-tools\build\releaseChecker\index.js - D:\AwesomeProject\node_modules\@react-native-community\cli\node_modules\@react-native-community\cli-tools\build\index.js - D:\AwesomeProject\node_modules\@react-native-community\cli\build\tools\config\resolveNodeModuleDir.js - D:\AwesomeProject\node_modules\@react-native-community\cli\build\tools\config\resolveReactNativePath.js - D:\AwesomeProject\node_modules\@react-native-community\cli\build\tools\config\index.js - D:\AwesomeProject\node_modules\@react-native-community\cli\build\commands\install\install.js - D:\AwesomeProject\node_modules\@react-native-community\cli\build\commands\index.js - D:\AwesomeProject\node_modules\@react-native-community\cli\build\index.js - D:\AwesomeProject\node_modules\@react-native-community\cli\build\bin.js error Cannot find module 'node-libs-react-native' Require stack: - D:\AwesomeProject\metro.config.js - D:\AwesomeProject\node_modules\import-fresh\index.js - D:\AwesomeProject\node_modules\cosmiconfig\dist\loaders.js - D:\AwesomeProject\node_modules\cosmiconfig\dist\createExplorer.js - D:\AwesomeProject\node_modules\cosmiconfig\dist\index.js - D:\AwesomeProject\node_modules\@react-native-community\cli\build\tools\config\readConfigFromDisk.js - D:\AwesomeProject\node_modules\@react-native-community\cli\build\tools\config\index.js - D:\AwesomeProject\node_modules\@react-native-community\cli\build\commands\install\install.js - D:\AwesomeProject\node_modules\@react-native-community\cli\build\commands\index.js - D:\AwesomeProject\node_modules\@react-native-community\cli\build\index.js - D:\AwesomeProject\node_modules\@react-native-community\cli\build\bin.js. Error: Cannot find module 'node-libs-react-native' Require stack: - D:\AwesomeProject\metro.config.js - D:\AwesomeProject\node_modules\import-fresh\index.js - D:\AwesomeProject\node_modules\cosmiconfig\dist\loaders.js - D:\AwesomeProject\node_modules\cosmiconfig\dist\createExplorer.js - D:\AwesomeProject\node_modules\cosmiconfig\dist\index.js - D:\AwesomeProject\node_modules\@react-native-community\cli\build\tools\config\readConfigFromDisk.js - D:\AwesomeProject\node_modules\@react-native-community\cli\build\tools\config\index.js - D:\AwesomeProject\node_modules\@react-native-community\cli\build\commands\install\install.js - D:\AwesomeProject\node_modules\@react-native-community\cli\build\commands\index.js - D:\AwesomeProject\node_modules\@react-native-community\cli\build\index.js - D:\AwesomeProject\node_modules\@react-native-community\cli\build\bin.js at Module._resolveFilename (node:internal/modules/cjs/loader:1140:15) at Module._load (node:internal/modules/cjs/loader:981:27) at Module.require (node:internal/modules/cjs/loader:1231:19) at require (node:internal/modules/helpers:177:18) at Object.<anonymous> (D:\AwesomeProject\metro.config.js:21:29) at Module._compile (node:internal/modules/cjs/loader:1364:14) at Module._extensions..js (node:internal/modules/cjs/loader:1422:10) at Module.load (node:internal/modules/cjs/loader:1203:32) at Module._load (node:internal/modules/cjs/loader:1019:12) at Module.require (node:internal/modules/cjs/loader:1231:19) info Run CLI with --verbose flag for more details.
08-15
这些错误的根本原因是你 **没有正确安装 `node-libs-react-native` 和相关依赖**，或者安装路径、版本有问题。 --- ## ✅ 解决方案 ### ✅ 步骤 1：确保安装了 `node-libs-react-native` ```bash npm install --...
react-svg-worldmap：一个简单，紧凑和免费的React SVG世界地图
02-05
react-svg-worldmap 一个简单，紧凑和免费的React SVG世界地图。 import { WorldMap } from "react-svg-worldmap" ... const data = [ { country : "cn" , value : 1389618778 } , // china { country : "in" , value : 1311559204 } , // india ] . . . < WorldMap color = "green" title = "This is My Map" size =
react-reactsvgpanzoom为SVG添加平移和缩放功能的一个React组件
08-15
react-svg-pan-zoom：为SVG添加平移和缩放功能的一个React组件
react-svgtocomponent将SVG转成ReactVue组件
08-15
svg-to-component 将SVG转成React/Vue组件
react-SVGR将SVG转换为React组件
08-14
SVGR - 将SVG转换为React组件
reiconify:将 SVG 图标转换为 React 组件，例如。
08-04
重新图标化 将 SVG 图标转换为 React 组件。 特征 自定义组件模板，包括基类。 导出 ES 模块和 CommonJS 模块。 提供使图标与文本对齐的center道具，看看。 提供用于生成静态图标站点的开发工具。 如果需要，为 SVG 元素生成唯一 ID。 使用格式化代码 安装 npm install reiconify-cli --save-dev 命令行选项 reiconify [options] [files] Options: --version Show version number [boolean] --src Build JSX source files [boolean] [default: false] --src
react中使用svg作为字体图标,使用react-svg组件
m0_47531829的博客
04-23 6285
公司一直使用svg作为字体图标，从一开始我使用svg字体图标的方式也是通过img标签引入的，直到最近公司做的业务有个附件预览需求是这样的：展示几种不同的样式，当预览的附件里面没有数据和有数据的时候svg图标展示的样式不一样，鼠标移入的时候，又展示不同的样式图标，一开始感觉就是把所有要展示的svg图标切出来就行了，但是后来发现有几种图标没有， 如图，其中的模板有数据时，和鼠标经过-无数据悬停态的时候的svg图标没有，于是我和ui就去要了一下图标，但是ui说svg可以改颜色，并让我按照这个改下就行，不必要
React-SVG 使用教程
gitblog_00452的博客
08-09 616
React-SVG 是一个用于在 React 应用中加载和显示 SVG 图标的库。它提供了简单易用的 API，使得在 React 组件中嵌入 SVG 文件变得非常方便。React-SVG 支持动态加载 SVG 文件，并且可以对 SVG 进行样式和属性的自定义。 ## 项目快速启动 ### 安装 首先，你需要通过 npm 或 yarn 安装 React-SVG： ```bash npm in...
在 React、Vue项目中使用 SVG
大转转FE
02-06 6329
在一些现代的扁平化设计网站，特别是移动端网站，经常会包含许多简单而清晰的小图标，例如网站图标、用户的默认头像、移动端网页首页底部固定的切换栏等，这些小图标一般都是由美工做好，可能会放到精灵图上，前端再进行裁切展示。而实际上，这些简单的小图标完全没必要让美工来做，前端完全可以通过 svg使用代码把这些简单的图标画出来，并且，因为这些图标是用代码描述出来的，所以如果想要修改这些图标，例如改变图标的颜色
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

旭阳的头发呀

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值