在 SVG 文件中将文本作为 prop 传递 - 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在一个反应​​组件中，然后您可以将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;