Icon integration with react-native-web give an empty square

[6mo]

Environment

Importing icon using react-native-vector-icons for a react-native-web app didn't work as expected. Here is the conf in order to reproduce it:

package.json

    "react-native": "0.71.7",
    "react-native-web": "^0.19.7",
    "react-native-vector-icons": "^10.0.0"
    "babel-loader": "9.1.3",
    "url-loader": "4.1.1",
    "css-loader": "^6.8.1"

webpack.config.js

const path = require('path')
const appDirectory = path.resolve(__dirname)

const webpack = require('webpack')
const HtmlWebpackPlugin = require('html-webpack-plugin')

const compileNodeModules = [
    'native-base',
    '@react-navigation',
    'react-native-svg',
    'toggle-switch-react-native',
    'react-native-webview',
    'react-native-vector-icons',
    '@react-native-community'
].map((moduleName) => path.resolve(appDirectory, `node_modules/${moduleName}`))

const babelLoaderConfiguration = {
    test: /\.js$|tsx?$/,
    include: [
        path.resolve(__dirname, 'index.web.js'), // Entry to your application
        path.resolve(__dirname, 'App.tsx'), // Change this to your main App file
        path.resolve(__dirname, 'src'),
        ...compileNodeModules
    ],
    use: {
        loader: 'babel-loader',
        options: {
            cacheDirectory: true,
            presets: ['module:metro-react-native-babel-preset'],
            plugins: ['react-native-web']
        }
    }
}

const imageLoaderConfiguration = {
    test: /\.(gif|jpe?g|png|svg)$/,
    use: {
        loader: 'url-loader',
        options: {
            name: '[name].[ext]',
            esModule: false
        }
    }
}

const cssLoaderConfiguration = {
    test: /\.css$/i,
    use: ['css-loader']
}

const ttfLoaderConfig = {
    test: /\.ttf$/,
    loader: 'url-loader',
    include: path.resolve(__dirname, 'node_modules/react-native-vector-icons')
}

module.exports = {
    entry: ['core-js/', path.resolve(appDirectory, 'index.web.js')],
    output: {
        path: path.resolve(appDirectory, 'dist'),
        publicPath: '/',
        filename: 'bundle.web.js'
    },
    resolve: {
        extensions: ['.web.tsx', '.web.ts', '.tsx', '.ts', '.web.js', '.js'],
        alias: {
            'react-native$': 'react-native-web'
        }
    },
    module: {
        rules: [babelLoaderConfiguration, imageLoaderConfiguration, cssLoaderConfiguration, ttfLoaderConfig]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: path.join(__dirname, 'web/index.html')
        }),
        new webpack.HotModuleReplacementPlugin(),
        new webpack.DefinePlugin({
            __DEV__: JSON.stringify(true)
        }),
        new webpack.EnvironmentPlugin({ JEST_WORKER_ID: null })
    ]
}

In the code, when i try this :

import Icon from 'react-native-vector-icons/Feather'

<Icon name="briefcase"/>

i get an empty square instead of the icon

am i missing something ?

[johnf]

@6mo Did you add the stylesheet as documented in the README https://github.com/oblador/react-native-vector-icons#web-with-webpack

[6mo]

May bad, this what was missing. I added it in index.web.js and worked like a charm.

Thank you

[shivam27k]

Hey, I am facing the same issue, can you help me out how exactly did you solve it?

[6mo]

fixed by adding the JS specified in the readme in my index.js: https://github.com/oblador/react-native-vector-icons#web-with-webpack