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

Allow displaying an SVG logo using svg source #207

Merged
merged 5 commits into from
Aug 26, 2024

Conversation

Kicu
Copy link
Member

@Kicu Kicu commented Aug 26, 2024

Problem

In current version of this library only image assets (like *.png and other raster images) can be used as a logo image within QR code. Using an SVG asset for the logo is not possible.

Solution

This PR tries to make it possible to use svgs in said logo image.

I have not found any reasonable way to do this via a single logo prop, as there is no React component that could accept either ImageSourcePropType or an SVG and handle every case correctly. Some conditional logic is required to handle the svg prop, thats why I decided to add it as a new prop, while the old logo prop will work unchanged.
That makes this new functionality backwards compatible. If you won't use new logoSVG prop - the library will work as it used to.

Done

  • add (optional) logoSVG prop that accepts an svg and will render it
  • add (optional) logoColor prop to set the fill property of the svg logo
  • this solution handles:
  • on web we will either render the svg logo if its a component OR in case of string we use standard Image from react-native-svg
  • on native ios/android we use special dedicated components from react-native-svg which will handle all these cases

Examples

ios and android

Screenshot 2024-08-26 at 11 57 50 Screenshot 2024-08-26 at 11 58 02

web

Screenshot 2024-08-26 at 13 02 13

Copy link
Contributor

@luacmartins luacmartins left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

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.

2 participants