Pass an inline SVG as React component prop

user_2705328 0
Viewed 10292

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()} />
 }
reactjs svg
2 Answers

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).

user_86612670
Related