title: How To Pass a Ref to a SVG Component in React
body: <p>I have a svg component that is declared like so:</p>
  <pre class="lang-js prettyprint-override"><code>
  import {ReactComponent as Icon} from 'someplace.svg'
  
  function SomeComponent(props){
     const [someState, setSomeState] = useState(0)
     const iconRef = useRef(null)
  
     useEffect(() =&gt; {
        //always prints null
        console.log(iconRef.current) 
     }, [someState])
  
  return &lt;div&gt;
   &lt;button onClick={() =&gt; setSomeState(prev =&gt; prev + 1)}&gt;{someState}&lt;/button&gt;
   &lt;Icon ref={iconRef}/&gt;
  &lt;/div&gt;
  }
  </code></pre>
  <p>The problem here is that iconRef will always return null. I think this is because it is declared as a component so the ref would need to be forwarded directly to the svg tags but how do I do that?</p>
  <p>Any ideas?</p>