CODEWITHSUNDEEP
javascriptreactjssvg
Mani
Mani

Reputation: 2563

passing text as prop in SVG file - React

I have a Avatar.svg Image which consists of following file content

<?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>[email protected]</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>

In my React AvatarCircleSVG.js file I have following 

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

const AvatarCircleSVG = () => {
  return (
  <AvatarCircle>
    <p>IH</p>
  </AvatarCircle>
  )
}

export default AvatarCircleSVG

I want to show this IH in svg tspan circle which i'm passing in its component as children

Upvotes: 4

Views: 7061

Answers (1)

SayJeyHi
SayJeyHi

Reputation: 1841

You should wrap your svg in a react component, then you could pass props or child to it. sth like :

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;

Upvotes: 9

Related Questions