nb-icons.md

id	title
nb-icons	NativeBase Icons

NativeBase Icons was designed to make the integration of icons in NativeBase projects easier. It is a unified library that can export icons and fonts for all native and web platforms.

Built With

• react-native-vector-icons
• @expo/vector-icon
• typescript

Installation

yarn add @native-base/icons

Next.js setup

1. Add all the fonts.

We need to write this piece of code in pages/_document.js

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;

Optional: If you want to add particular fonts.

If you want to add AntDesignFonts and MaterialIconsFonts, update pages/_document.js like this:

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;

2. Update next.config.js with this code if you are using @native-base/next adapter:

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;
    },
  },
});

Create React App

1. Add all the fonts.

Write this piece of code in index.jsx/index.tsx:

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);

Optional: If you want to add particular fonts.

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);

Expo

1. Update .babel.config.js configuration file in root directory like this:

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

Usage

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