SETUP-WEB.md

Setup guide for Web Apps

This guide can probably be improved, please feel free to contribute.

React-native-web Setup

To port a react-native mobile app to web using react-native-web you just need to ensure the fonts are known on the web-app side.

You will need add the font-family for each font you use to your css.

You can debug missing font-families by looking in the Developer console in your web browser when debugging your web app.

NOTE: if you're using webpack or similar you may need to configure webpack to handle loading of ttf fonts, using url-loader or file-loader. See Web Setup for more details.

In your App.css or similar add the font-family specifications:

@font-face {
  src: url(path/to/fonts/Ionicons.ttf);
  font-family: "Ionicons";
}

@font-face {
  src: url(path/to/fonts/FontAwesome.ttf);
  font-family: "FontAwesome";
}

@font-face {
  src: url(path/to/fonts/FontAwesome5_Brands.ttf);
  font-family: "FontAwesome5_Brands";
  font-weight: 400; /* Regular weight */
  font-style: normal;
}

@font-face {
  src: url(path/to/fonts/FontAwesome5_Regular.ttf);
  font-family: "FontAwesome5_Regular";
  font-weight: 400; /* Regular weight */
  font-style: normal;
}

@font-face {
  src: url(path/to/fonts/FontAwesome5_Solid.ttf);
  font-family: "FontAwesome5_Solid";
  font-weight: 900; /* Bold weight for solid */
  font-style: normal;
}

@font-face {
  src: url(path/to/fonts/MaterialIcons.ttf);
  font-family: "MaterialIcons";
}

@font-face {
  src: url(path/to/fonts/Feather.ttf);
  font-family: "Feather";
}

@font-face {
  src: url(path/to/fonts/MaterialCommunityIcons.ttf);
  font-family: "MaterialCommunityIcons";
}

/* TODO: Add other icons fonts here */

Web Setup

To integrate the library with your web project using webpack, follow these steps:

1. In your webpack configuration file, add a section to handle TTF files using url-loader or file-loader:

   {
     test: /\.ttf$/,
     loader: "url-loader", // or directly file-loader
     include: path.resolve(__dirname, "node_modules/react-native-vector-icons"),
   }

2. In your JavaScript entry point, consume the font files and inject the necessary style tag:

   ```js
     import Icon from '@react-native-vector-icons/fontAwesome';
   
     // Generate the required CSS
     import iconFont from '@react-native-vector-icons/fontawesome/fonts/FontAwesome.ttf';
     const iconFontStyles = `@font-face {
       src: url(${iconFont});
       font-family: FontAwesome;
     }`;
   
     // Create a stylesheet
     const style = document.createElement('style');
     style.type = 'text/css';
   
     // Append the iconFontStyles to the stylesheet
     if (style.styleSheet) {
       style.styleSheet.cssText = iconFontStyles;
     } else {
       style.appendChild(document.createTextNode(iconFontStyles));
     }
   
     // Inject the stylesheet into the document head
     document.head.appendChild(style);
     ```
   

   By following these steps, you will seamlessly integrate the vector icons library into your web project using webpack, enabling you to effortlessly use the icons within your web application.