use "react-native-vector-icons" in "create-react-app" with "react-app-rewired"

readme.md

guide of how to use react-native-vector-icons on web with webpack and react-app-rewired

1. yarn add react-native-vector-icons react-native-web
2. yarn add react-app-rewired -D
3. update package.json scripts (before react-scripts start/build/test)

    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test --env=jsdom",

4. create a new file named config-overrides.js add it to the root of the project

const path = require('path');

module.exports = function override(config) {
  config.module.rules.push({
    test: /\.ttf$/,
    loader: 'file-loader',
    include: path.resolve(__dirname, './static/media/[name].[ext]'),
  });

  return config;
};

5. create a new file named icons.js and add it wherever you like

/* eslint-disable camelcase */
import FontAwesome_ttf from 'react-native-vector-icons/Fonts/FontAwesome.ttf';
import Entypo_ttf from 'react-native-vector-icons/Fonts/Entypo.ttf';

const IconsCSS = `
@font-face {
  src: url(${FontAwesome_ttf});
  font-family: FontAwesome;
}
@font-face {
  src: url(${Entypo_ttf});
  font-family: Entypo;
}
`;

const style = document.createElement('style');
style.type = 'text/css';
if (style.styleSheet) style.styleSheet.cssText = IconsCSS;
else style.appendChild(document.createTextNode(IconsCSS));

document.head.appendChild(style);

6. import icons.js file in your index.js file like that import './utils/icons'; // for append icons css

7. use - galery of icons (https://oblador.github.io/react-native-vector-icons/)

import FontAwesomeIcon from 'react-native-vector-icons/dist/FontAwesome';
import EntypoIcon from 'react-native-vector-icons/dist/Entypo';

<FontAwesomeIcon name="pied-piper-alt" size={30} color="#010" />
<EntypoIcon name="bug" size={30} color="#404" />

---

original instructions from the repo

thank you very much. I was struggling with it from hours

Man, you are a life saver!

How to use it in Next.js?

Great Tuto. one Question:
How do you do it with TypeScript? it give me a lot of errors... Thanks!