babel-plugin-inline-react-svg
babel-plugin-inline-react-svg copied to clipboard
airbnb
Pass refs to the svg element
Hey, do you have any idea on how this plugin could support refs? Functional components don't support refs, so out of the box, it's not possible to simply write <CloseSvg ref={node => this.node = node} />. Switching to a class component could work. Supporting some form of innerRef property could also work. What is your opinion on the matter?
I think converting to a class component might be the best option here.
cc @lencioni, do you think that would cause any issues?
I don't think it would cause any problems. It won't be able to take advantage of optimizations that React will make to rendering functional components in the future though, so that's a bummer. But on the flipside, you could also probably add shouldComponentUpdate() { return false; } without any problems.
@lencioni We accept arbitrary props at the top level to customize the svg. Could we just use PureComponent?
Ah that's right. Yeah that should work. Won't be able to support earlier versions of React before PureComponent existed. Also, I'm not sure how much difference it will make for such low-level components but I don't see any reason not to.
Kinda unexpected that this is still not supported - are people using alternative babel plugins for this?
Edit I wasn't able to find any alternatives so I've created a fork that fixes this issue (exclusively supports v16.8.0 and up). I'll try to keep it up to date until this gets closed.
npm i -D andyrichardson/babel-plugin-inline-react-svg#refs
Diff is here would love to get this merged into mainline. I'm not sure people are using pre-16.8.0 versions of React anymore.
@andyrichardson I no longer use this plugin, as I don’t think this kind of build-step magic is really good anymore.
I’ve moved to using something like SVGR to generate full react components, and just have those checked into the codebase. I’ve found this pattern to be far superior.
