WARNING: THIS SITE IS A MIRROR OF GITHUB.COM / IT CANNOT LOGIN OR REGISTER ACCOUNTS / THE CONTENTS ARE PROVIDED AS-IS / THIS SITE ASSUMES NO RESPONSIBILITY FOR ANY DISPLAYED CONTENT OR LINKS / IF YOU FOUND SOMETHING MAY NOT GOOD FOR EVERYONE, CONTACT ADMIN AT ilovescratch@foxmail.com
Skip to content

Conversation

@burnes
Copy link

@burnes burnes commented Nov 18, 2024

Summary

The onLoad handler is called when the SVG is loaded, but does not provide any information about the SVG nor reference it. In this change, the onLoad handler is not called with the SvgProps of the loaded SVG (e.g. height, width, viewBox etc) - so basically the attributes of the root <svg>tag.

The SvgProps are now provided to the onLoad handler of the SvgUri and SvgCssUri components. Then we can react on different aspects of the SVG when loaded.

Background: Had an issue with SVGs not scaling correctly when changing the height of the image. With the handler I could fix my problem on my app side. I can imagine other use cases for this feature and decided to contribute this change here.

This PR does not fix the issue I had, but adds the feature for the onLoad handler. Any ideas to fix the issue itself are warmly welcome. The issue is described in the PR's test case.

Other considerations in this PR:

  • using useMemo or UseEffect in conditionals/try-catch is not recommended, so restyled this code structure.

Test Plan

The added test showcase uses the onLoad handler to calculate the required with to keep the aspect ratio. It is tested on the SvgUri and the SvgCssUri component.

Screenshot of the test example (Android):

SvgUri on Android

What's required for testing (prerequisites)?

XCode / Android studio

Open the UI test

What are the steps to reproduce (after prerequisites)?

Just open the test example

Compatibility

OS Implemented
iOS ✅❌
MacOS ✅❌
Android ✅❌
Web ✅❌

Checklist

  • I have tested this on a device and a simulator
  • I added documentation in USAGE.md
  • I updated the typed files (typescript)
  • I added a test for the API in the __tests__ folder

The SvgProps are now provided to the onLoad handler of the SvgUri and SvgCssUri components. Then we can react on different aspects of the SVG when loaded.

Background: Had an issue with SVGs not scaling correctly when changing the height of the image. With the handler I could fix my problem on my app side. I can imagine other use cases for this feature and decided to contribute this change here.

This PR does not fix the issue I had, but adds the feature for the onLoad handler. Any ideas to fix the issue itself are warmly welcome. The issue is described in the PR's test case.

Other considerations in this PR:
- using useMemo or UseEffect in conditionals/try-catch is not recommended, so restyled this code structure.
@burnes burnes force-pushed the feature/svg-props-onload branch from 1de80f8 to c46ef0a Compare May 13, 2025 06:27
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