将文本作为 SVG 文件中的道具传递 - React

Question

我有一个 Avatar.svg 图像，其中包含以下文件内容

<?xml version="1.0" encoding="UTF-8"?>

<svg width="32px" height="32px" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">

    <!-- Generator: sketchtool 59 (101010) - https://sketch.com -->

    <title>6249deb3-b2ff-4bbd-b5bb-7db96f3315cf@1.00x</title>

    <desc>Created with sketchtool.</desc>

    <g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">

        <g id="avatar">

            <g id="Group-3">

                <g id="Group">

                    <circle id="Oval" fill="#414042" cx="16" cy="16" r="16"></circle>

                    <text id="GT" font-family="BrandonText-BoldItalic, Brandon Text" font-size="14" font-style="italic" font-weight="bold" letter-spacing="0.7" fill="#F0F1F2">

                        <tspan x="6.843" y="21">My Text Here</tspan>

                    </text>

                </g>

            </g>

        </g>

    </g>

</svg>

在我的 React AvatarCircleSVG.js 文件中，我有以下内容

import { ReactComponent as AvatarCircle } from './Avatar.svg'

const AvatarCircleSVG = () => {

  return (

  <AvatarCircle>

    <p>IH</p>

  </AvatarCircle>

  )

}

export default AvatarCircleSVG

我想IH在 svgtspan圆圈中展示这个，我将它作为孩子传递给它的组件

Answer 1

您应该将您svg的组件包装在一个 react 组件中，然后您可以传递props或传递child给它。喜欢：import React from 'react';const AvatarSvg = props => (&nbsp; <svg&nbsp; &nbsp; width="32px"&nbsp; &nbsp; height="32px"&nbsp; &nbsp; viewBox="0 0 32 32"&nbsp; &nbsp; version="1.1"&nbsp; &nbsp; xmlns="http://www.w3.org/2000/svg"&nbsp; &nbsp; xmlns:xlink="http://www.w3.org/1999/xlink"&nbsp; >&nbsp; &nbsp; <g&nbsp; &nbsp; &nbsp; id="Symbols"&nbsp; &nbsp; &nbsp; stroke="none"&nbsp; &nbsp; &nbsp; strokeWidth="1"&nbsp; &nbsp; &nbsp; fill="none"&nbsp; &nbsp; &nbsp; fillRule="evenodd"&nbsp; &nbsp; >&nbsp; &nbsp; &nbsp; <g id="avatar">&nbsp; &nbsp; &nbsp; &nbsp; <g id="Group-3">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <g id="Group">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <circle id="Oval" fill="#414042" cx="16" cy="16" r="16" />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <text&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; id="GT"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; fontFamily="BrandonText-BoldItalic, Brandon Text"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; fontSize="14"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; fontStyle="italic"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; fontWeight="bold"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; letterSpacing="0.7"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; fill="#F0F1F2"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; >&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <tspan x="6.843" y="21">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {props.name}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </tspan>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </text>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </g>&nbsp; &nbsp; &nbsp; &nbsp; </g>&nbsp; &nbsp; &nbsp; </g>&nbsp; &nbsp; </g>&nbsp; </svg>);export default AvatarSvg;