使用svg作为react组件
SVG（Scalable Vector Graphics）是一种基于XML的矢量图形格式，用于描述二维图形和图像。在React中，可以将SVG文件作为组件来使用。
SVG作为React组件的优势包括：
- 可缩放性：SVG图形可以无损地缩放，无论放大还是缩小，图像质量都不会受到影响。
- 矢量图形：SVG使用数学公式来描述图形，因此图像可以无限放大而不会失真，适用于各种分辨率的设备。
- 动画效果：SVG支持各种动画效果，可以通过React的动画库或CSS来实现交互式和动态的图形效果。
- 可编辑性：SVG图形可以通过文本编辑器进行修改和编辑，方便开发人员进行定制和调整。
使用SVG作为React组件的应用场景包括：
- 数据可视化：SVG可以用于创建各种图表、图形和数据可视化组件，如折线图、柱状图、饼图等。
- 图标和图形：SVG可以用于创建自定义的图标和图形，适用于网站、应用程序和用户界面的设计。
- 动画效果：SVG可以用于创建各种动画效果，如过渡动画、路径动画、形状变换等，增强用户体验。
- 游戏开发：SVG可以用于创建简单的游戏元素和动画效果，如角色、道具、背景等。
腾讯云提供了一些与SVG相关的产品和服务，包括：
- 腾讯云对象存储（COS）：用于存储和管理SVG文件，提供高可靠性和可扩展性的存储服务。产品介绍：腾讯云对象存储
- 腾讯云CDN加速：用于加速SVG文件的分发，提供全球覆盖的内容分发网络，提高用户访问速度和体验。产品介绍：腾讯云CDN加速
- 腾讯云云服务器（CVM）：用于部署和运行React应用程序，提供高性能、可靠性和安全性的云服务器。产品介绍：腾讯云云服务器
总结：SVG作为React组件可以实现可缩放的矢量图形，适用于数据可视化、图标和图形、动画效果等应用场景。腾讯云提供了对象存储、CDN加速和云服务器等相关产品和服务来支持SVG在云计算环境中的应用。
相关·内容
2回答
我试图在React中使用SVG获得一个背景模式--本机。
我创建了一个组件，它使用‘react本机-svg’库，如下所示：
import React from "react";
import { SvgXml } from "react-native-svg";
const xml = `
<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'>
<g
浏览 12提问于2021-12-07得票数 0
我在发展反应过程中遇到了麻烦。我使用
<img src="example.svg">
或者使用模块“react inlinesvg”嵌入svg
<Isvg src="example.svg" wrapper={React.DOM.div}>
我希望在react、add和remove类中直接操作svg文件的<g>节点(ps:它在JQuery中非常容易)。我试图获得元素的引用，但失败了。我该怎么办？
浏览 0提问于2016-08-09得票数 0
回答已采纳
我设法实现了gatsby-plugin-react-svg并使其正常工作，但之后我看到了所有的库图标都是拜拜的。
如果我在我的SVG文件夹中添加更多的svg，这是可以的，但是Box图标库中的所有图标都消失了。
我想使用图标库和我的自定义svg。
这就是我的gatsby-config.js文件的样子
{
resolve: 'gatsby-plugin-react-svg',
options: {
rule: {
include: /svg/,
}
}
},
在JSX中，我使用如
浏览 1提问于2021-07-14得票数 1
回答已采纳
1回答
当我导入一个SVG并将它作为道具和console.log传递到另一个组件时，我会得到编号。由于这一点，我遇到了一些问题，因为react-native-svg-uri要求我将SVG作为其svgXmlData属性的字符串导入。
父组件
import SVGICON from './icon.svg';
const ParentComponent = () => {
console.log(SVGICON); // this outputs numbers
return (
<ChildComponent
icon={SVGICON}
浏览 0提问于2019-07-22得票数 0
我通过npm安装了字体-太棒了。
"dependencies": {
"@fortawesome/fontawesome-svg-core": "^1.2.15",
"@fortawesome/free-solid-svg-icons": "^5.7.2",
"@fortawesome/react-fontawesome": "^0.1.4",
"axios": "^0.18.0",
浏览 0提问于2019-02-28得票数 0
回答已采纳
我正在尝试从svg导入一个React，然后将它作为一个支柱发送到另一个组件，以呈现functionComponent。使用下面的设置，这将编译得很好，但是当试图在浏览器中呈现svg时，它最终会崩溃：
错误:对象作为React子对象无效(找到:键为{$$typeof的对象，呈现})。如果您打算呈现一个子集合，请使用数组代替。
下面的类是简化的。但我想做的是：
在overlay.tsx中：
import { ReactComponent as icon } from "/icon.svg";
import CustomItem from "/customItem&#
浏览 5提问于2020-04-15得票数 4
我预计svg会变成红色，但颜色#D8D8D8没有任何变化。我在svg中看到了填充，如果我将它转换成一个参数，我就可以使用它，但我更愿意使用React props来设置填充，这样我就可以通过我的css设置一个悬停： svg代码(我的my Sketch导出)： <svg width="57px" height="33px" viewBox="0 0 57 33" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://ww
浏览 32提问于2020-09-05得票数 0
3回答
我正在尝试使用带有react的SVG，但我不能。我尝试了一些解决方案，结果我找不到为什么会出现这个错误： InvalidCharacterError
Failed to execute 'createElement' on 'Document': The tag name provided ('<svg>
<g transform="translate(0.000000,227.000000) scale(0.100000,-0.100000)"
fill="#000000" stroke="n
浏览 39提问于2020-06-20得票数 0
回答已采纳
我有一个代码，它只在从服务器获取某些数据并设置变量之后才呈现。当使用svg.js时，它使用SVG.AddTo("#someID")，但是由于有条件的呈现，包含ID的div尚未呈现。如何将SVG.AddTo延迟到呈现了div并且id存在之后？下面是代码(一些内容已被删除，例如服务器获取)：
import React, { useEffect, useState, useRef } from "react";
import {
CCol,
CRow,
} from "@coreui/react";
import * as SVG
浏览 9提问于2022-11-18得票数 0
我的目标是从我自己的服务器上获取一个SVG，并在children <polygon></polygon> 标记之后插入属性。
我这样做是为了增加一个互动层，可以修改的反应。
到目前为止，我能够实现这一点，通过反应应用服务我的SVG，但我想避免它的安全原因。
到目前为止，这是我的进步：
const App = ({children}) => {
return (
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height
浏览 1提问于2022-05-20得票数 1
回答已采纳
3回答
我有一些使用SVG的React组件，可以包含在SVG中，也可以不包含在SVG中。因此，我希望有一种简单的方法让它们在svg或g中呈现，这取决于参数，类似于：
export default class SVGComponent extends React.Component{
get containerElement() {
return this.props.inSVG ? 'g' : 'svg';
}
render() {
return(<{containerElement}>
<text>Ext
浏览 0提问于2015-09-02得票数 1
2回答
重用ReactJS组件
、、、
我已经构建了一个ReactJS组件来进行渲染。可以为每个组件构建单独的组件，但我希望使用一个组件，但根据需要传递单独的组件。
这就是到目前为止所起的作用：
emoction.js
import { faHeart } from "@fortawesome/free-solid-svg-icons";
import { faHeartBroken } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesom
浏览 0提问于2021-09-28得票数 1
我用CRA创建了一个UI库。图书馆在国家预防机制上出版。库中的组件使用SVG，我使用SVG的语法为
import {ReactCompoent as Icon} from 'assets / icon'
我想使用内部的库，我用Reactive17.0.2和webpack 5创建的主应用程序。我将加载器添加到Webpack，我可以在主应用程序中使用svg作为组件，如-
import CalendarIcon from './Calendar.svg'
而且起作用了。
安装库并导入使用SVG作为ReactComponent的组件之后：
import {BadgeBo
浏览 21提问于2022-04-11得票数 2
1回答
我有一个SVG文件: check.svg
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28.3 28.3"><path d="M25.2 3.638l-1.6 1.6c-4.3 4.3-8.9 9.2-13.2 13.6l-5.9-4.9-1.7-1.4-2.8 3.3 1.7 1.4 7.5 6.2 1.6 1.3 1.4-1.4c4.8-4.8 9.9-10.4 14.6-15l1.6-1.6-3.2-3.1z"/></svg>
我想要它的Rea
浏览 3提问于2020-02-29得票数 0
回答已采纳
3回答
我正在尝试使用函数的道具来呈现SVG。对于如何实现这一点有什么帮助吗？
以下是代码：
import React from "react";
import Camera from "../icons/Camera.svg";
export default function Button(props) {
console.log(props.icon);
return (
<button
type="button"
className="mx-auto mb-2.5 flex items-cen
浏览 7提问于2022-06-19得票数 2
我希望将props从一个组件传递到另一个组件，并在第二个组件中将其用于组件声明之上的导入
这是为了使用相同的组件，不需要创建4次，每次使用另一个SVG。
我用的是React、Javascript、Webpack、巴别塔。我还使用svgr/webpack从SVG图片创建组件，使用SVG而不是< img >对我来说至关重要。
import React from 'react';
import RightNavItem from './right_nav_item';
const RightNav = ({navitems}) => {
con
浏览 5提问于2019-07-13得票数 0
回答已采纳
我需要从另一个组件更改侧边栏组件的状态。 我的代码： Sidebar.tsx > const SideBar: React.FC = () => {
const [open, setOpen] = useState<boolean>(false);
function switchSidebar() {
setOpen(!open);
}
const bar = useMemo(() => <Menu open={open} sidebar={true} />, [open])
re
浏览 87提问于2021-06-30得票数 0
回答已采纳
我使用的是ReactJS 16.12，有三个组件。1)父级2)历史3)SvgViewer。我想从SvgViewer functional component(另一个子组件)调用一个属于History component(子组件)的函数。感谢您的解决方案...
这是我的代码：
1)父组件：
import React, { PureComponent } from "react";
import History from "./history";
import SvgViewer from "./svg-viewer";
class UnitMon
浏览 0提问于2019-12-29得票数 0
我创建了一个带有自定义按钮的库。按钮文件夹包含24个svg文件。
在项目中，我传递了一个文本、一个函数和图标，但是当尝试呈现图标崩溃并显示下一个错误时：
index.js:1警告: React.createElement: type无效--需要一个字符串(用于内置组件)或一个类/函数(用于复合组件)，但React.createElement: undefined。您可能忘记从定义在其中的文件中导出组件，或者您可能混淆了默认导入和命名导入。
我不知道为什么不渲染图像，请谁来帮我？
这是我的代码：
import React from "react";
import PropTyp
浏览 0提问于2020-02-07得票数 0
假设我有一个SVG元素，其中包含所有美国州的路径。
<svg>
<g id="nh">
<title>New Hampshire</title>
<path d="m 880.79902,142.42476 0.869,-1.0765 1.09022,..." id="NH" class="state nh" />
</g>
...
</svg>
SVG数据保存在一个具有.svg扩展名的单独文
浏览 0提问于2015-12-26得票数 12
回答已采纳
1回答
我有一个令人困惑的.svg文件，其中的向量是用笔画和填充创建的。我想要自定义本地.svg文件的颜色。例如，如果我写 <TestIconFlexible width='100%' height='100%' fill='red' /> 我的React Native会将真正的矢量颜色更改为红色。 我的测试.svg文件是这样的 <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="h
浏览 40提问于2021-04-30得票数 0
回答已采纳
错误:元素类型无效:期望字符串(用于内置组件)或类/函数(用于组合组件)，但获得: number。
检查SignInScreen的呈现方法。
import React from 'react';
import {
SafeAreaView,
View,
Text,
TextInput,
TouchableOpacity,
} from 'react-native';
import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
import
浏览 11提问于2022-05-20得票数 1
1回答
我试图在我的React组件中动态导入SVG
因此，与其从‘./../ ReactComponent / LikeIcon }/ svg /like.svg’导入{svg作为LikeIcon}，不如每次需要svg时，我需要传递名称"like“，例如动态导入它。
我在这里找到了一个解决方案：
但是，当我构建(npm运行构建)时，svgs却没有找到。
知道为什么吗？
浏览 3提问于2021-03-04得票数 4
回答已采纳
我在material-ui https://material-ui.com/api/svg-icon/的react应用程序中使用SvgIcon。文档中的所有示例都是<path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z" />。我不知道这是什么。如何使用此组件从外部文件呈现svg？ 我已经检查了这篇文章的How to use an SVG file in a SvgIcon in Material-UI，但它没有给出一个加载外部文件的答案。
浏览 53提问于2019-04-23得票数 0
环境信息
响应本地信息输出：
"react": "16.8.6",
"react-native": "0.60.4"
图书馆版本: 1.2.3
复制步骤
使用react本机-cli创建一个新项目。
将一个SVG文件导入到项目的src文件夹中(我下载并使用了react本机-svg文档中提到的homer映像进行测试)。
将svg导入为import MySVG from './mysvg.svg';
将MySVG传递给SvgUri组件的svgXmlData属性
预期行为
图像应该在屏幕上呈现。
可
浏览 0提问于2019-08-08得票数 2
1回答
是否可以将我的动态原色从ReactJS设置为SVG的特定类？如果是的话，我如何实现它？
Error.svg
<!-- Generator: Adobe Illustrator 26.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y=
浏览 2提问于2022-03-09得票数 0
回答已采纳
我见过很多人都在讨论不起作用的事情。
我使用的是react 18，我想在我的磁盘上导入一个SVG文件，并在我的DOM上呈现它。
我试图将其导入如下：
import { ReactComponent as Underconstruction } from '../../media/business/under-construction.svg';
const Sidebar= ()=> {
return <Underconstruction />
}
但它向我展示了这个错误：
我还尝试使用它作为常规的图像标记，它向我显示了相同的错误：
const
浏览 10提问于2022-10-19得票数 0
import React from 'react'
export default (props) => (
<div {...props}>
<svg focusable="false" fill="white" viewBox="0 0 24 24" aria-hidden="true">
<path d="M12 3v10.55c-.59-.34-1.27-.55-2-.55-2.21 0-4 1.79-4 4s1.7
浏览 15提问于2022-03-29得票数 2
我正在开发一个react原生应用程序。我的项目中有一堆本地的SVG文件。我想使用我的自定义组件来渲染文本和SVG图像。 下面是我的自定义组件，用于呈现静态SVG文件的Text和Image： import React from 'react';
import {View, Text, Image, StyleSheet} from 'react-native';
export default MyComponent = ({svgFile, text}) => {
return (<View style={styles.line}>
浏览 146提问于2020-07-25得票数 0
1回答
我想动态地获得SVG图标。我找到了一种方法来做这件事，但我似乎犯了一些错误。我在哪里做错了？
Icon.js
import React from "react";
import { ReactComponent as Bollards } from "./icons/bollards.svg";
import { ReactComponent as Earthquake } from "./icons/earthquake.svg";
import { ReactComponent as Fire } from "./icons/fire
浏览 0提问于2021-01-25得票数 2
回答已采纳
我有下面的代码，它简单地为我们的产品构造块，所选的状态允许组件被选中和取消选择。如何确定这些组件中的哪一个被选中，并限制用户一次只能选择一个组件。这是ReactJS代码
import React from 'react';
export default class singleTile extends React.Component{
constructor(props){
super(props);
this.title = this.props.title;
this.desc = this.props.desc;
this.svg = this.pro
浏览 2提问于2018-11-06得票数 0
回答已采纳
我遵循了一个关于React的教程( -日期为2019年1月3日)，并用npx create-react-app *app_name*创建了一个React应用程序。此命令在我的计算机上生成的App.js文件与此命令为提供教程的人生成的文件不同。React从那以后改变了吗?还是我下载的东西有问题？
我的App.js
import React from 'react';
import logo from './logo.svg';
import './App.css';
function App() {
return (
浏览 1提问于2019-06-20得票数 33
回答已采纳
1回答
我有这个代码来创建一个英雄横幅与它的CSS，我的项目是使用react和MUI作为前端。我不知道如何将这段代码转换成MUI，我试过了，但样式不起作用。
HTML代码：
<svg data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none">
<path d="M321.39,56.44c58-10.79,114.16-30.13,17
浏览 5提问于2022-10-02得票数 0
1回答
在简单的react应用程序中，我有以下组件结构
<div id='app'>
<Navbar />
<Graph />
<Footer />
</div>
Navbar有固定高度80 has
页脚有固定高度40 has
图是一个d3包装器div，包含带有图元素的SVG。
如何将图形放进屏幕的剩余高度，使其始终占据屏幕的剩余高度？
如何在调整大小事件时更新包含d3包装器/SVG的react组件？
PS。因为我希望图形是响应的，所以我不应该硬编码SVG的宽度和高度。
是我试图解决这个问题的代码片段。
浏览 3提问于2017-11-02得票数 1
回答已采纳
在基于创建- React -app的组件中，只要SVG文件在项目中，将SVG作为React组件导入就可以正常工作：
import {ReactComponent as Switch} from "../../../assets/svgs/switch.svg";
但是，在将所有图像移动到AWS S3桶后，我会收到以下错误：
预期会有一个JavaScript模块脚本，但是服务器会响应MIME类型的"image/svg+xml“。根据HTML规范，对模块脚本实施严格的MIME类型检查。
据我所知，对.js文件(组件)的期望与从外部接收的.svg文件之间存在冲突。
如何才能
浏览 4提问于2022-11-08得票数 1
我有一个像这样的Svg组件
interface SvgIconProps {
children: React.ReactNode;
strokeWidth?: number;
width?: number;
height?: number;
className?: string;
}
export const SvgIcon = ({
children,
strokeWidth = 1,
width = 24,
height = 24,
className,
}: SvgIconProps) => {
return (
<svg
浏览 4提问于2022-07-10得票数 0
回答已采纳
我正在构建一个组件，基本上像一个复选框，但定制的设计。
我的组件就像
class App extends React.Component {
constructor(props){
super(props);
this.state = {
checked: false
};
}
toggle(){
this.setState({
checked: !this.state.checked
});
}
render() {
return (
<svg onClick={this.toggle.bind(this)}>
<
浏览 4提问于2016-11-03得票数 2
1回答
在NavLink中改变组件的样式
、、、、
我正在制作一个导航条，使用React React中的NavLink。使用'isActive‘道具样式的活动链接，是可以的。但是，我怎样才能把它里面的子元素样式化。准确地说，请看这个..。
const Nav = [
{path : '/', icon : <NavIcon.Home />},
{path : '/service', icon : <NavIcon.Service />}
]
function someFunc(){
return (
Nav.map(({path, icon}) => (
<NavLi
浏览 10提问于2022-10-10得票数 0
4回答
我在react应用程序中显示SVG时遇到问题。
代码如下：
<svg className="svg-arrow">
<use xlinkHref="#svg-arrow" />
</svg>
//styling
.user-quickview .svg-arrow {
fill: #fff;
position: absolute;
top: 12px;
right: 10px;
-webkit-transform: rotate(90deg);
transform:
浏览 14提问于2017-04-25得票数 7
我在react中渲染一个画布组件，它返回一个<rect>元素的列表，我试图实现的是只改变被点击的<rect>的颜色，然而在我的代码中，每当我点击其中一个元素时，元素的完整列表被更新，我如何才能只更新被点击的<rect>元素呢？ 下面是我的代码： import { useState } from "react";
import styles from "./Canvas.module.css";
let data = [
{
id: "1",
x: "50",
y:
浏览 31提问于2021-09-18得票数 1
回答已采纳
1回答
我有一个带有ID的页面，如果我使用另一个ID通过链接访问同一个页面，那么页面不会更新道具和状态，并且页面看起来与刷新前完全相同。我认为这是因为我没有改变国家和道具的剩余。
NewsPageItem
import React, { useEffect } from 'react';
import { Link, useHistory } from 'react-router-dom';
import Comments from './../shared/Comments/Comments';
import Container from 'c
浏览 0提问于2020-05-14得票数 0
回答已采纳
我需要使用styled component更改SVG的颜色。
import styled from "styled-component";
import {ifProp} from "styled-tools";
import arrowSVG from "./assets/arrow.svg";
const Arrow = styled(arrowSVG)`
fill: ${ props => props.shouldFill ? red : white };
`;
// Then use it like this:
<A
浏览 1提问于2018-09-20得票数 0
使用create-react-app和JavaScript/TypeScript，我知道我能够“导入”一个SVG，如下所示。我怎样才能用ReasonML做到这一点呢？
import { ReactComponent as Logo } from './logo.svg';
function App() {
return (
<div>
{/* Logo is an actual React component */}
<Logo />
</div>
);
}
浏览 5提问于2020-03-23得票数 3
回答已采纳
2回答
简要描述
因此，多亏了脚本，我的图标有73个组件。现在，如果我想调用这些图标，我可以单独调用我想要使用的每一个图标。，但这不是我想要的。
我想要的是只调用一个组件，在其中添加一个'name‘值。
例如：<图标名称=‘73个组件之一的名称--我想称之为’/>‘。
我的问题
如何循环遍历目录中的多个组件，并在开关情况下返回它们？
--这就是目录中所有73个组件都是的样子。
import React from 'react';
export default function NAMEOFICON(props) {
return (
<svg x
浏览 0提问于2018-11-29得票数 0
回答已采纳
我正在尝试创建一个SvgIcon组件，并通过props传递一个SVG给它。 由于React处理SVG的方式，当它们被导入为ReactComponents (例如import { ReactComponent as ArrowIcon } from "icons/arrow.svg")时，我必须以动态的方式定义我的组件。 这就是我到目前为止所知道的： const styleSvgIcon = ({ theme, stroke, fill, size, icon: Icon }) => styled(
Icon
).attrs({
viewBox: `0 0 24
浏览 8提问于2021-04-28得票数 0
我使用的是React版本16.8.6。我试图在我的应用程序中加载一些SVG图像，但在图像出现在dom中之前有1秒的延迟。 下面是我如何加载svg图像 import menuIcon from 'public/images/menu_icon.svg';
<img src={menuIcon} /> 请找到显示加载延迟问题的gif链接。https://ibb.co/jH35S38 PS。这只发生在生产环境中。
浏览 70提问于2019-06-14得票数 2
1回答
我想根据我的品牌变量导入一组不同的SVG图标。我试着做这样的事情：
import { BRANDING } from 'BrandingBuilder';
import {`${BRANDING}-icons.svg`};
但我知道React不支持导入{variable}。有解决办法吗？
浏览 0提问于2018-12-07得票数 1
2回答
我是react的新手，正在尝试对react组件中的以下代码进行单元测试
import React,{Component} from 'react';
const styleSheet = document.styleSheets[0];
const keyframes =
`@-webkit-keyframes pulse {
0% {
transform: scale(0.9);
opacity: 0.6;
}
50% {
transform: scale(1);
opacity: 1;
浏览 2提问于2017-10-25得票数 1
2回答
React中的节流
、、、、
令我惊讶的是，下面这段在我的React组件类中限制mousemove的代码并没有像预期的那样工作，状态总是报告为真& mousemove继续被连续触发。我不明白为什么会这样。
class SVGParent extends React.Component {
constructor(){
super( props );
...
this.dispatchMouseMoveThrottle = this.dispatchMouseMoveThrottle.bind( this );
}
...
dispatchMo
浏览 12提问于2017-04-29得票数 0
我有一个显示jpg的图像，但当出现错误时，它将显示一个svg图像。然而，Typescript声明onerror属性只接受字符串。有没有办法用onerror img属性来显示svg或组件？ 下面是我的代码： <img
width="100px"
height="100px"
src="myimg.jpg"
onError={(e) => {(e.target as HTMLImageElement).src ="error.jpg"}}
/>
//
浏览 69提问于2020-04-30得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
云直播
对象存储活动推荐
腾讯云开发者
