React native customized icon can't not be shown

Question

I am trying to add a customized icon, I followed the tutorial below: https://www.reactnative.guide/12-svg-icons-using-react-native-vector-icons/12.1-creating-custom-iconset.html

I putted icomoon.tff file in ./assets/fonts, so in my package.json, I added:

  "rnpm": {
   "assets": [
    "./assets/fonts"
   ]
  }, 

then in my HomePage.js:

import {createIconSetFromIcoMoon} from 'react-native-vector-icons';
import icoMoonConfig from '../selection.json';
const CustomIcon = createIconSetFromIcoMoon(icoMoonConfig);
CustomIcon.loadFont();
<CustomIcon name='aaa' 
   color = {color}
   size = {size}
/>

Then I ran:

yarn add react-native-vector-icons
yarn react-native link react-native-vector-icons

However, it still shows unrecognized font family Icomoon and screen shows a question mark instead of the icon.

Answer 1

First with your font.ttf or font.otf inside "./assets/fonts" run npx react-native link to auto-link fonts in IOS and Android folder.

You can create a function to translate a name for the "unicode' of the icon.

/* 
  just configure your unicodeTranslate to your 
  custom icons, changing the key and value
*/

export const unicodeTranslate = {
  ['yourNameIcon1']: '\uf015', 
  ['yourNameIcon2']: '\uf023',
};

const convertFont = (value: string) => {
  // Removing all accents and converting to lowercase
  let valueManipulated = value..toLowerCase().normalize("NFD").replace(/[\u0300-\u036f]/g, "")

  let translated = unicodeTranslate[valueManipulated]

  return translated
}

return (
  <Text style={{
      /* 
        fontFamily need be the same name of the file in 
        assets but without the extensions (otf or ttf) 
      */
      fontFamily: "yourCustomFontName", 
  }}>
      {convertFont(item.name)}
  </Text>
)
```