docs: add note about transformers like react-native-svg-transformer

[Armster15]

PR Description

react-native-svg-transformer is a popular transformer that plenty of people in the RN ecosystem use to import SVGs as React components. This transformer however, breaks SVG usage in this library.

This is not the fault of this library, rather more so on the transformer as it's modifying the default behavior of React Native's (more specifically Metro's) asset handling.

However, as this approach is quite popular, it makes sense adding a note in the docs about it. There's two parts to the warning: first, informing the end user that such transformers will break this functionality. I also added an example of how to resolve this with react-native-svg-transformer specifically as it's quite a popular lib. react-native-svg-transformer unfortunately overrides the svg extension specifically and does not give you an option to change the extension it's overriding (so no svg?react for example 😞), so my proposed solution uses another extension that resolves the SVG to Metro's standard resolution of SVGs and uses that in the code for the tabBarIcon.

Existing GitHub issue showing people struggling with this: #143 (comment)

Cheers, and thanks for this amazing library!

How to test?

N/A

Screenshots

N/A

[changeset-bot]

⚠️ No Changeset found

Latest commit: f1ce370

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[okwasniewski]

Thanks for adding this!