In the composition of App package, image resources are relatively large, so we can use Iconfont to replace the original PNG or JPG monochrome icon. The advantages of Iconfont are small Size, support arbitrary Size without distortion, support arbitrary color Settings, platform management icon and so on.

When the Size of the App project reaches a certain scale, the Size of the App package will also increase. At this time, we usually analyze and optimize the Size of the App package to reduce the Size of the package. Using iconfont to replace the original PNG monochrome icon of the project is one of your choices. This will be followed by a special article about reducing package size.

This article will share how to use the custom Iconfont icon in React Native development and provide a one-click script to automatically generate the corresponding mapping file.

RNIconfont [welcome issue/star/follow~]

This paper is mainly divided into three parts:

  • Integration and use of the React-native – Vector-icons library
  • How to use any custom iconfont
  • Write scripts to quickly generate iconFONT mapping files

1. Integration and use of the React-native vector-icons library

React-native – Vector-icons is a useful library for displaying iconfont ICONS in ReactNative.

There are only two steps to integration: 1. Introduce dependencies

Run: npm install --save react-native-vector-icons
Copy the code

2. Link to native libraries

Run: react-native link react-native-vector-icons
Copy the code

If the link fails or runs incorrectly in the second step, you can link it manually. For details, see react-native vector-icons.

After the integration, you can see that the library introduces several TTF files by default (the Android project is under Assets/Fonts) :

That is to say, all ICONS in these TTF files can be used directly. Here is how to use them.

It is very simple to use as follows:

import Icon from "react-native-vector-icons/Ionicons";

<Icon name='md-pricetag' size={16} color='#cccccc'></Icon>
Copy the code

2. How to use any custom iconfont

The use of the React-native Vector-icons library was described above, but so far you can only use iconfonts from TTF files that are introduced by default, because < icon >< / icon > only supports the ICONS introduced by default.

Obviously, this cannot meet our requirements. We want to use our own iconfont, so how should we do it? Here we take alibaba iconfont platform to choose the icon we want as an example.

1. Select the icon you want from The Alibaba Iconfont platform, download it locally and decompress it as follows:

2. Copy the iconfont. TTF file to assets/fonts directory of your Android project

Custom icon library

CXIcon.js

import createIconSet from 'react-native-vector-icons/lib/create-icon-set';
import glyphMap from './iconfont.json';

const iconSet = createIconSet(glyphMap, 'CXIcon'.'iconfont.ttf');

export default iconSet;

export const Button = iconSet.Button;
export const TabBarItem = iconSet.TabBarItem;
export const TabBarItemIOS = iconSet.TabBarItemIOS;
export const ToolbarAndroid = iconSet.ToolbarAndroid;
export const getImageSource = iconSet.getImageSource;
Copy the code

See import glyphMap from ‘./iconfont. Json ‘, so here we also need an iconfont.

iconfont.json:

{
  "biscuit": 58983."pizza": 59024."dangao": 59080
}
Copy the code

This is the Unicode code corresponding to the three ICONS downloaded from Ali Iconfont.

Ok, at this point we can use to show our custom download of several ICONS, using the following:

import React, {Component} from 'react';
import {
    Text,
    View
} from 'react-native';
import CXIcon from "./components/cxicon/CXIcon";

type Props = {};
export default class App extends Component<Props> {
    render() {
        return (
            <View style={styles.container}>
                <Text>Display ICONS from custom TTF files</Text>
                <CXIcon name='biscuit' size={50} color='# 226688'></CXIcon>
            </View>); }}Copy the code

3. Write a script to automatically generate the iconfont. Json mapping file

After the second step, you can use the icon you choose freely, but you will find a problem. Above, we need an iconfont. Json mapping file, which is handwritten by us. That’s not a programmer’s style. What’s our style? Yes, it is lazy, impossible to do the same job, this life will not be able to do the same job.

Back to the above, we downloaded from ali iconfont platform zip compression package after decompression there is an iconfont. SVG file, we will according to this file to parse and generate the iconfont. Json mapping file we want, roll up the sleeves, write a shell script.

iconfont_mapper.sh:

#! /bin/sh

if [ $# != 1 ] ; then

	echo "usage: $0 iconfont.svg(your svg file name)  "
	exit
fi

#OutputFile path,you can customize your pathOutputFileName=`echo iconfont.json` mapper=` awk '{ if($0 ~ /glyph-name/) print $0; if($0 ~ /unicode/) print $0"|split|" }' $1| tr '[:upper:]' '[:lower:]'| awk '{print $0}' RS='\='| tr "\n\"&#;" " "| awk '{ if ($1! ="split"&&$1! =""){ printf ("\""$3"\":"); printf ($5","); print "\r " }}' RS="|split|" | sed "s/-/_/g"` rm $OutputFileName echo "{" >> $OutputFileName echo $mapper >> $OutputFileName echo "}" >> $OutputFileName
#usage:
# ./iconfont_mapper.sh svg_file_path
Copy the code

Run the./iconfont_mapper.sh iconfont.

Note: if your iconfont_mapper.sh script and iconfont. SVG file are not in the same file directory, then iconfont.

After executing this script, you will find that the iconfont. Json mapping file is automatically generated in the directory where the script is located. Just put it in the project.

RNIconfont [welcome issue/star/follow~]

Finally, I hope that every icon in the world can be large or small, high-definition and flawless