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

fix: support .svg file import on web platform #5

Merged
merged 1 commit into from Mar 23, 2020
Merged

fix: support .svg file import on web platform #5

merged 1 commit into from Mar 23, 2020

Conversation

@darcien
Copy link
Contributor

darcien commented Mar 23, 2020

Previously, importing an svg file on the web will return a string instead of a component.

This diff will replace the existing webpack rule for svg with @svgr/webpack that allows us to import and use svg file directly on the web.

The cons is that now we can't use StyleSheet style directly, since the style is mapped to DOM directly, so we need to flatten it first.

@darcien darcien requested a review from sstur Mar 23, 2020
@darcien darcien merged commit 6188c48 into master Mar 23, 2020
1 check passed
1 check passed
build
Details
@darcien darcien deleted the fix/svg-web branch Mar 23, 2020
exclude: /node_modules/,
use: [
{
loader: '@svgr/webpack',

This comment has been minimized.

Copy link
@sstur

sstur Mar 23, 2020

Member

What if we use the react-native-svg-transformer inside our webpack instead of @svgr/webpack? Would that be possible?

This comment has been minimized.

Copy link
@darcien

darcien Mar 23, 2020

Author Contributor

They don't support it yet.

In fact, they're looking at @svgr/webpack as dependency for web support.

kristerkari/react-native-svg-transformer#70

This comment has been minimized.

Copy link
@darcien

darcien Mar 23, 2020

Author Contributor

Alternative solution would be putting our svg inside a file and add separate file for web.

// Logo.tsx
import Logo from '../assets/logo.svg';
export default Logo;
// Logo.web.tsx
import Logo from '../assets/logo.svg';
export default () => <img href={Logo} />

This comment has been minimized.

Copy link
@sstur

sstur Mar 23, 2020

Member

Hmm, let's go with what you have now for the sake of development speed, but I'd be keen to explore more in a future time.

This comment has been minimized.

Copy link
@darcien

darcien Mar 23, 2020

Author Contributor

In the future I think we can just use svg directly 😆
expo/expo#7385

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

Successfully merging this pull request may close these issues.

None yet

2 participants
You can’t perform that action at this time.