我想创建一个在React中显示SVG的组件.我一点运气都没有,有人知道将SVG转换为React组件的好方法吗.

我try 将它们添加到<img/>标签和<svg/>标签,但我一直得到一个坏的图像图标?

推荐答案

import React from 'react';
import PropTypes from 'prop-types';

export default function SVG() {
 return (
    <svg
      id="Layer_1"
    >
      <path d="M29.73,17.66H0V47.79H29.73V59.28c.21,5,3.88,6.78,8.42,5.25a2.47,2.47,0,0,0,.7-.37c11.47-9,19.37-18,30.84-27l.16-.13c3.49-3.18,2.46-6.8-.93-9.47L40.81,2.61A13.25,13.25,0,0,0,36.65.28C34-.51,31.54.37,30.41,3a10,10,0,0,0-.68,3.93c0,3.57-.05,7.16,0,10.73ZM93.15,64h29.73V94.16H93.15v11.48c-.21,5-3.88,6.79-8.42,5.25a2.24,2.24,0,0,1-.7-.37c-11.47-9-19.37-18-30.84-27L53,83.38c-3.49-3.17-2.46-6.8.93-9.46L82.07,49a13,13,0,0,1,4.16-2.32c2.66-.8,5.11.08,6.24,2.71a10,10,0,0,1,.68,3.94c0,3.56.06,7.16,0,10.72Z" />
    </svg>
  );
}

SVG.propTypes = {
  value: PropTypes.string,
};

Javascript相关问答推荐

即使设置了父级的最大高度,固定位置的分区内容也不会滚动?

使用useParams路由失败

如何在使用fast-xml-parser构建ML时包括属性值?

如何解决CORS政策的问题

togglePopover()不打开但不关闭原生HTML popover'

在带有背景图像和圆形的div中添加长方体阴影时的重影线

如何在输入元素中附加一个属性为checkbox?

如何使onPaste事件与可拖动的HTML元素一起工作?

使用Nuxt Apollo在Piniastore 中获取产品细节

Reaction组件在本应被设置隐藏时仍显示

JavaScript不重定向配置的PATH

使用Document.Evaluate() Select 一个包含撇号的HTML元素

警告框不显示包含HTML输入字段的总和

ngOnChanges仅在第二次调用时才触发

如何更改Html元素S的 colored颜色 ,然后将其褪色为原始 colored颜色

如果NetSuite中为空,则限制筛选

无法使用npm install安装react-dom、react和next

是否设置以JavaScript为背景的画布元素?

Angel Auth Guard-用户只有在未登录时才能访问登录页面,只有在登录时才能访问其他页面

无法在Adyen自定义卡安全字段创建中使用自定义占位符