React动态导入Svg文件

文章/答案/技术大牛

发布

6回答

如何动态导入SVG并将其内联呈现

javascript、reactjs、webpack、webpack-4

我有一个函数，它接受一些参数并呈现SVG。我希望根据传递给函数的名称动态导入该svg。看起来是这样的：试图按照我的函数试图给出这个错误的方式呈现它

浏览 9提问于2020-04-21得票数 25

回答已采纳

3回答

react本机中svg文件的条件呈现

javascript、reactjs、typescript、react-native、svg

在我的应用中，每个狗品种都有自己的svg文件存储在我的资产文件夹(大约150个svg文件)。我想把相应的svg呈现给每一个狗的帖子，但我不知道处理这个问题的最佳方法是什么。我的应用程序应该导入所有svg文件吗？我应该把所有svg文件转换成JSX文件吗？我已经在申请的其他部分做过这件事。这将创建一个巨大的文件，我不确定是否有150条would /switc

浏览 9提问于2021-12-13得票数 0

回答已采纳

2回答

javascript、reactjs、typescript、svg

我的项目文件夹中有以下结构： src -> assets -> general-icons pointer-arrow.svg| | | LazyLoader.tsx LazyLoader是一个功能强大的react组件，我在其中动态导入了一个组件，在本例中是一个svg<

浏览 28提问于2020-06-29得票数 4

回答已采纳

1回答

动态导入SVG

reactjs、svg

我试图在我的React组件中动态导入SVG 因此，与其从‘./../ ReactComponent / LikeIcon }/ svg /like.svg’导入{svg作为LikeIcon}，不如每次需要svg时，我需要传递名称"like“，例如动态导入它。

浏览 3提问于2021-03-04得票数 4

回答已采纳

1回答

nodejs中的动态需求& react

node.js、reactjs

我正在尝试从动态导入一个图标并抛出这个错误：import React from 'react'; const Button = ({ icon =

浏览 1提问于2018-12-28得票数 0

回答已采纳

1回答

如何在组件卸载时取消SvgUri请求

reactjs、react-native、react-native-svg

警告:无法对已卸载的组件执行React状态更新。这是一个no-op，但它表明您的应用程序中存在内存泄漏。我的组件是： import React, { useEffect } from 'react';import { View, StyleSheet, Text } from 'react-native'; import { SvgUri } from 'react</em

浏览 26提问于2021-01-04得票数 3

4回答

导入图标动态响应

reactjs、icons、font-awesome

我在一个react项目中使用FontawesomeIcon，图标的名称来自数据库。我想从@fortawesome/free-固体-svg-图标动态导入数据库中的图标。import React, { Component } from "react";import {faImage}

浏览 8提问于2020-10-21得票数 5

回答已采纳

1回答

the本机:如果矢量图标不在目录中，如何添加它？

reactjs、react-native、react-native-vector-icons、vector-icons

如果我在那个下载svg文件，有没有办法将它添加到我的应用程序中？或者是否有不同的推荐方法来添加不在中的矢量图标

浏览 10提问于2022-05-20得票数 1

2回答

响应本机SVG导入返回号

javascript、reactjs、typescript、react-native、expo

你好，最后两天，我与这个SVG问题斗争。第一个问题是我不能导入svg文件，它说找不到模块，然后我修复它关于声明问题。然后，通过在func中编写svg数据找到一个解决方案，如下所示： width = 60,) => `<svg width>` 但是我想手动导入。 ": "18.0.0"

浏览 4提问于2022-09-18得票数 0

3回答

如何在DOM上呈现反应18的SVG？

reactjs

我使用的是react 18，我想在我的磁盘上导入一个SVG文件，并在我的DOM上呈现它。我试图将其导入如下： return <Underconstruction /

浏览 10提问于2022-10-19得票数 0

1回答

babel插件名的资产导入是做什么的？

reactjs、webpack、babeljs

好的，我到处都找过了，没有关于这个Babel模块的文档--命名为babel的插件--资产导入有人能解释一下它的用途和工作原理吗？

浏览 6提问于2020-08-22得票数 3

回答已采纳

4回答

无法使用React从本地文件夹显示svg

javascript、reactjs、svg

React from 'react';class App extends React.Component{ return( 这里我需要三样东西

浏览 3提问于2019-05-22得票数 3

回答已采纳

3回答

基于父级属性的React动态导入

javascript、reactjs

是否可以在React中基于Parent中的道具进行动态导入？/svg1.js'import svg3 from './svg3.js' switch (props.icon) case 'svg1': output = <svg1/

浏览 27提问于2020-07-02得票数 0

3回答

SVG没有在react本机中使用react本机-svg呈现。

react-native、svg

下面的SVG没有呈现，我只能看到一个空白的屏幕。import * as React from 'react'; const xml = `<svg xmlns='http://www.w3.org/2000/<

浏览 4提问于2022-06-16得票数 0

1回答

如何在create-react-app中动态导入图片

javascript、reactjs、webpack、import

/assets/img/${iconName}.svg`)} />import React from 'react'; import cashback from '../../

浏览 14提问于2020-05-16得票数 1

回答已采纳

3回答

动态使用字体

reactjs、font-awesome

icon = 'FaFolder'}这是错误:未能找到图标{前缀："fas"，iconName："faFolder"}import { FaFolder } from '@fortawesome/free

浏览 3提问于2021-01-26得票数 0

回答已采纳

2回答

Webpack + React* +多台SVG装载机问题*

javascript、reactjs、webpack

{ use: [ loader: 'url-loader' {我需要在CSS中加载svg，并在React中导入它们。如果我用 url-加载器单独的CSS工作。如果我单独使用，那么在<e

浏览 2提问于2018-01-04得票数 1

回答已采纳

1回答

如何在react中动态渲染图像？

reactjs、typescript

如何在react / typescript中动态渲染/导入图像？以下是我想要实现的目标。 MEDIAS.map((media) => (<img src={ &#

浏览 3提问于2021-04-19得票数 1

1回答

Gatsby生成中SVG错误的故障排除

node.js、reactjs、svg、gatsby

我试图在网上获得一个简单的盖茨比站点-- gatsby develop工作正常，但在gatsby build上我得到了以下错误消息：UNHANDLED REJECTION - Unencoded <- Column: 2我没有明确地使用任何SVG，所以很难解决这个问题--有什么建议吗？

浏览 2提问于2020-12-31得票数 1

回答已采纳

3回答

React: SVG通过id或class动态添加CSS

reactjs、svg

在React中，我有一个svg文件，比如mySVG.svg <svg width="50" height="50" viewBox="0 0 50 50" xmlns="http://www.w3.org/2000/svg"> <rect id="Unit1" class="class1" x="0

浏览 91提问于2021-10-27得票数 0

回答已采纳

点击加载更多

如何动态导入SVG并将其内联呈现

react本机中svg文件的条件呈现