reactjs - Pass props to svg from parent component

Question

I want to pass some props to child component. My parent component is Icon, child component is Home you can see at the bottom. For instance; I cannot pass the viewBox prop to Home component. I cannot wrap Icon component with svg element and pass the props because, I want to use svgs for react-native and web. I am using react-native-svg-uri at the react-native side.

storiesOf('Media', module)
  .addDecorator(withKnobs)
  .add('Icon', () => (
    <Icon viewBox="0 0 24 24">
      <Home />
    </Icon>
  ))

My Icon component:

render() {
const { children, className, fill, viewBox, height, width, style } = this.props
const childrenWithProps = React.cloneElement(this.props.children, {
  viewBox: viewBox
})

return (
  <div style={style?.container as React.CSSProperties} className="proto-svg__container">
    {childrenWithProps}
  </div>
)
}

My Home Component which is svg:

export default function Home() {
  return (
    <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
      <path
        fill="#202020"
        d="M27.372,16.96l-9-8-1.329,1.494L21.707,14.6V24.707h-12V15.121l7.707- 
        7.707L16,6,4,18l1.414,1.414,2.293-2.293v9.586h16V16.378l2.336,2.076Z"
      />
    </svg>
  )
}

question from:https://stackoverflow.com/questions/66061080/pass-props-to-svg-from-parent-component

Answer 1

Waitting for answers