README
@react-native-hero/font-icon
This module is used to add custom fonts.
By the way, you can also add custom font icons.
Getting started
Install the library using either Yarn:
yarn add @react-native-hero/font-icon
or npm:
npm install --save @react-native-hero/font-icon
Link
- React Native v0.60+
For iOS, use cocoapods
to link the package.
run the following command:
$ cd ios && pod install
For android, the package will be linked automatically on build.
- React Native <= 0.59
run the following command to link the package:
$ react-native link @react-native-hero/font-icon
Steps
react-native-asset is recommend.
Download your font file, such as
abc.ttf
.Put the font file in the
<project>/assets/fonts
folder.Edit
<project>/react-native.config.js
, add the assets.
module.exports = {
assets: ['./assets/fonts'],
};
Run
react-native-asset
.At this point, the font is installed, but you don't know the
fontFamily
of the font.Call
enumFonts()
on ios, you will get a fonts array, and you will find thefontFamily
from the array.
import {
enumFonts,
} from '@react-native-hero/font-icon'
enumFonts().then(data => {
console.log(data.fonts)
})
Here comes the core step, ios needs the
fontFamily
, but android just needs the font file name.If the font file name is not the
fontFamily
, you should to change the file name to thefontFamily
, then runreact-native-asset
again.If you just need a new font, that's all.
If you need a font icon, see the example below.
Sorry for my english, may be you can provide a better explanation.
Example
import {
createFontelloIcon,
createIcomoonIcon,
} from '@react-native-hero/font-icon'
// config is a json downloed from fontello
const FontelloIcon = createFontelloIcon(config)
// config is a json downloed from icomoon
const IcomoonIcon = createIcomoonIcon(config)
// then you can use the Icon Component
<FontelloIcon
size={14}
color="#666"
name="like"
style={{
marginLeft: 4
}}
/>