接受SVG作为React组件的prop-Java 学习之路

我正在研究一个需要接受SVG作为道具的React组件 .

如果没有提供prop，我有一个默认的svg，但是如果提供了它，那么默认的svg可以用prop中接受的那个替换掉 .

所以组件就像 .

<MySvg src={path to svg or the svg itself} height={20} width={20} fillColor={'red'} />

组件应该做的就是使用提供的道具显示此SVG . 我希望DOM是这样的 .

<svg fill={this.props.fillColor} height={this.props.height} width={this.props.width}>
    <g>
        <rect />
    </g>
</svg>

由于每个SVG都不同，这意味着它可能有多边形，rect，g等，实现这一目标的最佳方法是什么？

我要找的2件事？

从路径加载svg并应用道具（颜色，高度，宽度）？
如果src prop有SVG本身，我们如何显示它并应用道具（颜色，高度，宽度）

Update: 我在下面的答案中尝试了一种方法，但它似乎不起作用 . 这是我所拥有的CodeSandbox的链接 - codesandbox.io/s/n0yzv9yyvp

2 回答

0

您最好的选择是使用数据URI .

例：

<img src='data:image/svg+xml;utf8,<svg ... > ... </svg>'>

在这里阅读更多：https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URIs

回复于 2024-04-24T15:41:28+08:00

我在react.js中使用SVG很多，我找到的最好的解决方案是使用embed svg：

<MySvg src={'/path/to/svg'} height={20} width={20} fillColor={'red'} />

在你的组件内部

<svg fill={this.props.fillColor} height={this.props.height} width={this.props.width}>
  <g>
    <image
      x="10"
      y="197"
      width="159"
      height="113"
      xlinkHref={this.props.src}
    />
  </g>
</svg>

x ， y ， width 和 height 是 image svg标签的常用参数，您可以根据需要省略或重写它们

回复于 2024-04-24T15:41:28+08:00

接受SVG作为React组件的prop

2 回答

相关问题