Pass an inline SVG as React component prop

Question

Is this possible to pass an inline SVG as component prop (and not as component child). I tried with a method like below but that doesn't work :

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

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

Answer 1

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

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

Once you have the component, you will need to define the other component and use the Icon as follow:

// 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} />);
}

Answer 2

Try to import SVG as React Component as shown

import { ReactComponent as AnyName } from '../pathtosvg';

render() {
   <AnotherComponent Icon={AnyName} />
}

Make sure prop name is capitalized otherwise it won't work if you destructure your props in AnotherComponent. But if you are not destructuring then props.anyNameWouldWork (no need to capitalize).