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:

   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.