Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Pass refs to the svg element #13

Open
AugustinLF opened this issue May 16, 2017 · 10 comments · May be fixed by #36
Open

Pass refs to the svg element #13

AugustinLF opened this issue May 16, 2017 · 10 comments · May be fixed by #36

Comments

@AugustinLF
Copy link

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?

@kesne
Copy link
Collaborator

kesne commented Jun 20, 2017

I think converting to a class component might be the best option here.

cc @lencioni, do you think that would cause any issues?

@lencioni
Copy link
Contributor

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.

@kesne
Copy link
Collaborator

kesne commented Jun 21, 2017

@lencioni We accept arbitrary props at the top level to customize the svg. Could we just use PureComponent?

@lencioni
Copy link
Contributor

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.

@albinotonnina albinotonnina linked a pull request Dec 15, 2017 that will close this issue
@albinotonnina
Copy link

Hello! What do you think about #36 ?

@andyrichardson
Copy link

andyrichardson commented May 15, 2020

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.

@kesne
Copy link
Collaborator

kesne commented May 15, 2020

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

@andyrichardson
Copy link

@kesne thanks for letting me know. I'll check that out 👍

@sagi-arbroknot
Copy link

Is there any news with that?

@NickKelly1
Copy link

Still having this issue

Considering moving to SVGR instad

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.

7 participants