Nativebase: How to use custom fonts?

[xkyii]

Hi,
I have made a iconfont use createIconSet of react-native-vector-icons,and I don't known how to use it in NativeBase,Is there any speciel ways?

[himanshu-satija]

We have conditionals for iconFamily hardcoded in this file

If you have created your own iconSet then you should create a fork of NativeBase and add your iconSet conditional in that file.

[Kielan]

it would be nice if this information is somewhere more accessible, the link in this answer is broken. I know it's a year old question, just seems to come up a lot and no clear solution when searching this repo.

[Geoffrey-D]

Hello,

in v2 if you want to add a custom font, you need to adapt the file IconNB.js. I did it this way with a font created from Icomoon and native-base 2.3.1:

native-base/dist/src/basic/IconNB.js :

import {MyIcons} from 'relative/path/to/MyFont';
[...]
var _MyIcons=MyIcons;var _MyIcons2=_interopRequireDefault(_MyIcons);
[...]
case"MyCustomFont":
this.Icon=_MyIcons2.default;
break;

MyFont.js :

import { createIconSetFromIcoMoon } from 'react-native-vector-icons';
import icoMoonConfig from 'MyFont.json';
const MyIcons = createIconSetFromIcoMoon(icoMoonConfig, 'icomoon', 'MyFont.ttf');
export { MyIcons }

In your component :

import {getTheme, StyleProvider, Icon} from 'native-base';
[...]
<StyleProvider style={getTheme({iconFamily : 'MyCustomFont'})}><Icon name="MyIconName"/></StyleProvider>

Cheers

[delkant]

How can you override the color of the Icon when you are using a StyleProvider??.

this wont work:
<Icon name="MyIconName" color="#f0ad4e"/>

[delkant]

Nevermind I found the answer:

<Icon name="MyIconName" style={{color:'#f0ad4e'}}/>

[SupriyaKalghatgi]

This is documented here https://docs.nativebase.io/Components.html#icon-def-headref

[delkant]

Thank you. But my issue was that the property color wasn't working when applying a StyleProvider.

To be clear:

This doesn't work
<StyleProvider style={getTheme({iconFamily : 'MyCustomFont'})}>
<Icon name="MyIconName" color="#fff"/>
</StyleProvider>

This works fine
<StyleProvider style={getTheme({iconFamily : 'MyCustomFont'})}>
<Icon name="MyIconName" style={{color:'#fff'}}/>
</StyleProvider>