NativeBase Icons | NativeBase | Universal Components for React and React Native

To add all the fonts, write this piece of code in _document.js


Copy
import { default as NativebaseDocument } from "@native-base/next-adapter/document";
import fontsCSS from "@native-base/icons/FontsCSS"
import { AppRegistry } from "react-native";
import { Main } from "next/document";
import * as React from "react";

class Document extends NativebaseDocument {
  //
}

async function getInitialProps({ renderPage }) {
  AppRegistry.registerComponent("Main", () => Main);
  const { getStyleElement } = AppRegistry.getApplication("Main");
  const page = await renderPage();
  const styles = [
    // eslint-disable-next-line react/jsx-key
    <style dangerouslySetInnerHTML={{ __html: fontsCSS }} />,
    getStyleElement(),
  ];
  return { ...page, styles: React.Children.toArray(styles) };
}

Document.getInitialProps = getInitialProps;

export default Document;

To add particular fonts: (For example, if you need to add AntDesignFonts and MaterialIconsFonts, write this piece of code in _document.js)


Copy
import { default as NativebaseDocument } from "@native-base/next-adapter/document";
   import AntDesignFontFaceCSS from "@native-base/icons/FontsCSS/AntDesignFontFaceCSS";
   import MaterialIconsFontFaceCSS from "@native-base/icons/FontsCSS/MaterialIconsFontFaceCSS";
   
   const fontsCSS = AntDesignFontFaceCSS + MaterialIconsFontFaceCSS;
   
   class Document extends NativebaseDocument {
     //
   }
   
   async function getInitialProps({ renderPage }) {
     const res = await NativebaseDocument.getInitialProps({ renderPage });
     const styles = [
       // eslint-disable-next-line react/jsx-key
       <style dangerouslySetInnerHTML={{ __html: fontsCSS }} />,
       ...res.styles
     ];
     return { ...res, styles: React.Children.toArray(styles) };
   }
   
   Document.getInitialProps = getInitialProps;
   
   export default Document;
   ```

Update next.config.js with this code if you are using

@native-base/next adapter

):

Copy
const { withNativebase } = require("@native-base/next-adapter");
    const path = require("path");
    module.exports = withNativebase({
      dependencies: ["@native-base/icons"],
      nextConfig: {
        webpack: (config, options) => {
          config.module.rules.push({
            test: /\.ttf$/,
            loader: "url-loader", // or directly file-loader
            include: path.resolve(__dirname, "node_modules/@native-base/icons"),
          });
          config.resolve.alias = {
            ...(config.resolve.alias || {}),
            "react-native$": "react-native-web",
          };
          config.resolve.extensions = [
            ".web.js",
            ".web.ts",
            ".web.tsx",
            ...config.resolve.extensions,
          ];
          return config;
        },
      },
    });

To add all the fonts, write this piece of code in index.jsx/index.tsx:

Copy
import fontsCSS from "@native-base/icons/FontsCSS";
 const style = document.createElement("style");
 style.type = "text/css";
 style.appendChild(document.createTextNode(fontsCSS));
 document.head.appendChild(style);


To add a particular font


Copy
import AntDesignFontFaceCSS from "@native-base/icons/FontsCSS/AntDesignFontFaceCSS";
   import MaterialIconsFontFaceCSS from "@native-base/icons/FontsCSS/MaterialIconsFontFaceCSS";
   
   const fontsCSS = AntDesignFontFaceCSS + MaterialIconsFontFaceCSS;
   
   const style = document.createElement("style");
   style.type = "text/css";
   if (style.styleSheet) {
     style.styleSheet.cssText += fontsCSS;
   } else {
     style.appendChild(document.createTextNode(fontsCSS));
   }
   document.head.appendChild(style);

Copy
module.exports = function (api) {
  api.cache(true);
  return {
    presets: ["babel-preset-expo"],
    plugins: [
      [
        "module-resolver",
        {
          alias: {
            "@native-base/icons": "@native-base/icons/lib",
          },
        },
      ],
    ],
  };
};

Copy
import { Entypo } from "@native-base/icons";
return <Icon as={Entypo} name="user"></Icon>;