将文本作为 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 => (

  <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"

  >

    <g

      id="Symbols"

      stroke="none"

      strokeWidth="1"

      fill="none"

      fillRule="evenodd"

    >

      <g id="avatar">

        <g id="Group-3">

          <g id="Group">

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

            <text

              id="GT"

              fontFamily="BrandonText-BoldItalic, Brandon Text"

              fontSize="14"

              fontStyle="italic"

              fontWeight="bold"

              letterSpacing="0.7"

              fill="#F0F1F2"

            >

              <tspan x="6.843" y="21">

                {props.name}

              </tspan>

            </text>

          </g>

        </g>

      </g>

    </g>

  </svg>

);

export default AvatarSvg;