How to use react-native-vector-icons with react-native-web?

Rutvik Bhatt

I've setup monorepo project with react-native and react-native-web. I am sharing the same codebase for Android, iOS and Web. after installed react-native-vector-icons I've run the code in all three platforms and it works fine in Android and iOS but not in Web. In the web it looks like below:

enter image description here

I've set up Webpack as per the description here

below is my Webpack config config-overrides.js:

const fs = require('fs');
const path = require('path');
const webpack = require('webpack');

const appDirectory = fs.realpathSync(process.cwd());
const resolveApp = relativePath => path.resolve(appDirectory, relativePath);

// our packages that will now be included in the CRA build step
const appIncludes = [
    resolveApp('src'),
    resolveApp('../components/src'),
];
//below is the config for react-native-vector-icons
const ttf = {
    test: /\.ttf$/,
    loader: "file-loader",
    include: path.resolve(__dirname, "../../node_modules/react-native-vector-icons"),
};
module.exports = function override(config, env) {
    // allow importing from outside of src folder
    config.resolve.plugins = config.resolve.plugins.filter(
        plugin => plugin.constructor.name !== 'ModuleScopePlugin'
    );
    config.module.rules[0].include = appIncludes;
    config.module.rules[1] = ttf; //add the react-native-vector-icons here
    config.module.rules[2].oneOf[1].include = appIncludes;
    config.module.rules[2].oneOf[1].options.plugins = [
        require.resolve('babel-plugin-react-native-web'),
    ].concat(config.module.rules[2].oneOf[1].options.plugins);
    config.module.rules = config.module.rules.filter(Boolean);
    config.plugins.push(
        new webpack.DefinePlugin({__DEV__: env !== 'production'})
    );
    return config
};

Below is the use of react-native-vector-icons in my App.js file

import Icon from 'react-native-vector-icons/dist/FontAwesome';

<Icon name="glass" size={24}/>

I don't know why the icons are not loading or what I missed to configure. Please help me. Thank you in advance.

Rutvik Bhatt

After a lot of research finally, I found the solution as mentioned below:

add the TTF files and your custom font file into the public directory 

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

How to add icons to React Native app

React native icons

How to model a button with icons in react-native

How to link react-native-vector-icons to project

react-native react-native-vector-icons: How to use font awesome icons

How to use React Native vector icons?

How to import icons from multiple files in react native vector icons?

Duplicate module name: react-native-vector-icons

How to use react-native-web with Typescript

React Native Custom Icons w/ Vector Icons

React Native - Vector icons in Navigation bar

React-Native-Vector-Icons error on build

how to add @expo/vector-icons in react native app?

Problem with "react-native-vector-icons" in React native

How to resolve ':react-native-vector-icons' error for a successful build?

React native vector icons - dynamic type

Error while adding react native vector icons to react native with react native web

How to choose icons with same name in React Native Vector Icon

Switching from React Native Icons to React Native Vector Icons when using Scrollable Tab View

How do I show a vector icon in my ToolbarAndroid from react-native-vector-icons (react native)

react-native-vector-icons Android

Icons not loading correctly react-native-vector-icons

react-native-vector-icons/ react-native-elements not working

React native web issue with react native vector icons in storybook

How I can use React Native vector icons from different directory inside same component?

react native- vector-icons: change the name to simple text

How to add badge to react-native-vector-icons

Getting Error with react native Vector icons, using it in Project

React Native Elements icons (react-native-vector-icons) showing a question mark instead of actual icon