Pass inline SVG as a React support component

Question

Is it possible to pass inline SVG as a prop component (and not as a child component). I tried using the method as below but it doesn't work:

 mySvg1() {
   return (<svg xmlns="... ></svg>);
 }

 render() {
   <AnotherComponent icon={this.mySvg()} />
 }

+3

reactjs svg

Jerome 02 Aug 17 at 17:13

source to share

1 answer

Crysfel · Answer 1 · 2017-08-02T17:29:10+0000

Yes it is possible. But first, you need to define the Icon component.

// MySvgIcon.js
function MySvgIcon() {
  return (<svg xmlns="..."></svg>);
}

Once you have a component, you will need to define another component and use the icon like this:

// AnotherComponent.js
function AnotherComponent({ Icon }) {
  return (<div>A nice icon: <Icon /></div>);
}

And you can use them like this:

// OtherComponent.js
function OtherComponent() {
  return (<AnotherComponent Icon={MySvgIcon} />);
}