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

Add CSS class name prefix to prevent conflicting styles when using SVG mode #4

Open
wants to merge 1 commit into
base: master
Choose a base branch
from

Conversation

glennsayers
Copy link

Hi @KilianB

Thanks for maintaining this fork - it's been of great use in one of my projects.

I have a use case where I need multiple SVG based QR codes on one page. Currently, due to the inline SVG styles not being uniquely named, I cannot have these QR codes be different colours.
I've added a row of SVG codes to the bottom of demo page to show this - note how they all inherit the colour of the last QR code:

Before

To fix this, I've created a small function that will generate a random character string, and prefix this to the CSS classes on a per QR code basis. This makes the styles unique and prevents clashes.
See the same demo with this change added:

After

Thanks!

@KilianB
Copy link
Owner

KilianB commented Jul 28, 2023

Thank you. I'll check it out on Monday and will merge it

@vpenyazkov
Copy link

@KilianB do you still maintain this repo?

@JeneaVranceanu
Copy link

@KilianB do you still maintain this repo?

@KilianB Wondering the same.
I'm working on my own updated fork. I think it would be reasonable if I open a PR instead of creating a "new" package.

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 this pull request may close these issues.

4 participants