search

oblador / react-native-vector-icons

Customizable Icons for React Native with support for image source and full styling.
https://oblador.github.io/react-native-vector-icons/
MIT License
17.36k stars 2.12k forks source link

How to conditionally import react-native-vector-icons dist for web #1021

Open vjsingh opened 5 years ago

vjsingh commented 5 years ago

When using react-native-vector-icons on web, you have to use react-native-vector-icons/dist, per the README.

However, on a native app this results in an error that "react-native-vector-icons/dist" is not in the hashmap and couldn't be resolved.

What is the best way to conditionally import either the dist/ folder or the regular folder, depending on the platform?

zerobytes commented 4 years ago

couldnt you check which platform youre in, before importing, and import using a string variable?

Naturalclar commented 4 years ago

If you're using react-native for web, I'm assuming you'd be using webpack to bundle the js file. How I would handle it is by creating an alias for react-native-vector-icons, such that whenever a file is importing from react-native-vector-icons, you would instead be importing from react-native-vector-icons/dist

{
...
  resolve: {
    alias: {
      'react-native': 'react-native-web',
      'react-native-vector-icons': 'react-native-vector-icons/dist'
    }
  }
...
}
keung7251 commented 4 years ago

@Naturalclar ERROR in ./index.web.js Module not found: Error: Can't resolve 'react-native-vector-icons/Fonts/FontAwesome.ttf' @ ./index.web.js 7:15-73 @ multi ./index.web.js

mykhailo-melnyk commented 4 years ago

@keung7251 the same error for me

ganesh-papola commented 4 years ago

Any updates on this issue?

rachelang commented 3 years ago

Thanks @Naturalclar, was having problem with having to import dist for web and no dist for mobile. This solved compilation issues, but icon still doesn't show up: image

j0siah commented 6 months ago

For those who followed

If you're using react-native for web, I'm assuming you'd be using webpack to bundle the js file. How I would handle it is by creating an alias for react-native-vector-icons, such that whenever a file is importing from react-native-vector-icons, you would instead be importing from react-native-vector-icons/dist

{
...
  resolve: {
    alias: {
      'react-native': 'react-native-web',
      'react-native-vector-icons': 'react-native-vector-icons/dist'
    }
  }
...
}

And then ran into

@Naturalclar ERROR in ./index.web.js Module not found: Error: Can't resolve 'react-native-vector-icons/Fonts/FontAwesome.ttf' @ ./index.web.js 7:15-73 @ multi ./index.web.js

The solution is to only alias the module(s) you need not the whole library using an exact match. E.g, 

    config.resolve.alias = {
      ...config.resolve.alias,
      'react-native$': 'react-native-web',
      'react-native-vector-icons/MaterialCommunityIcons$': 'react-native-vector-icons/dist/MaterialCommunityIcons'
    };