一、使用任意自定义的iconfont

一、从阿里iconfont平台上挑选自己想要的icon，打包下载到本地并解压
二、将iconfont.ttf文件copy到android项目的assets/fonts目录下
三、自定义图标库

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;

四、编写脚本自动生成上面的iconfont.json映射文件
node buildJson (iconfont.svg)

buildJson.js

const fs = require('fs');
const path = require('path');

const lineReader = require('readline').createInterface({
  input: require('fs').createReadStream(path.join(__dirname,'./iconfont.svg'))
});

const names = [];
console.log('create...');
lineReader.on('line', function (line) {
  let words = line.split(' ');
  if(words[4]==='<glyph'){
    let [key,value] = [words[5].slice(12,-1),words[6].slice(11,-2)];
    if(value){
      names.push('    "'+key+'":'+value);
    }
  }
});
lineReader.on('close',function () {
  return fs.writeFile(path.resolve(__dirname, './iconfont.json'), '{\n'+names.join(',\n')+'\n}', function (err) {
    if (err) {
      throw new Error(err)
    } else {
      console.log('create successe.');
    }
  })
});

五、调用

<CXIcon name='piechart' size={32} color='#226688' />

二、多色图标

自定义SVGIcon

import React, { PureComponent } from "react";
import PropTypes from 'prop-types'
import Svg, {Path} from 'react-native-svg'

 class SVGIcon extends PureComponent {
  static propTypes = {
    size: PropTypes.number,
    fill: PropTypes.array,
    viewBox: PropTypes.string,
    path: PropTypes.array.isRequired
  }

  static defaultProps = {
    fill: ['#039FFC'],
    size: 40,
    viewBox: '0 0 1024 1024'
  };

  render () {
    const {size, path, style = {}, viewBox} = this.props
    return (
      <Svg
        width={size}
        height={size}
        style={style}
        viewBox={viewBox}>
        {path.map((item, i) => (
          <Path
            key={i}
            fill={item.color}
            d={item.d} />
        ))}
      </Svg>
    )
  }
}
export default SVGIcon

SvgPath

export const cbia=[{d:"M955.505778 768H68.494222c88.530489 153.0368 253.991822 256 443.505778 256 189.513956 0 354.975289-102.9632 443.505778-256 0 0-88.530489 153.0368 0 0z",color:"#E94B35"},
  {d:"M955.505778 768c43.559822-75.309511 68.494222-162.742044 68.494222-256H0c0 93.257956 24.9344 180.690489 68.494222 256h887.011556z",color:"#227FBB"},
  {d:"M1024 511.567644C1023.772444 229.000533 794.624 0 512 0 231.139556 0 3.094756 226.1504 0.028444 506.282667v5.700266H1024v-0.415289z",color:"#F2C500"}]

export const botswana=[{d:"M994.833124 682.666667H29.132857c70.286222 198.8608 259.925333 341.333333 482.850133 341.333333 222.9248 0 412.5696-142.472533 482.850134-341.333333z",color:"#2C97DE"},
  {d:"M29.132857 682.666667h965.700267c18.870044-53.378844 29.1328-110.819556 29.1328-170.666667s-10.262756-117.287822-29.127112-170.666667H29.127168C10.268501 394.712178 0.000057 452.152889 0.000057 512s10.268444 117.287822 29.1328 170.666667z",color:"#FFFFFF"},
  {d:"M29.132857 341.333333h965.700267C924.558279 142.472533 734.90779 0 511.98299 0 289.063879 0 99.419079 142.472533 29.132857 341.333333z",color:"#2C97DE"},
  {d:"M7.077035 597.333333H1016.888946a515.475911 515.475911 0 0 0 7.076978-85.333333c0-29.070222-2.417778-57.582933-7.076978-85.333333H7.077035A515.475911 515.475911 0 0 0 0.000057 512c0 29.070222 2.423467 57.582933 7.076978 85.333333z",color:"#000000"}]

调用

import * as iconPath from '../icon/SvgPath'
import SVGIcon from "../icon/SVGIcon";
<SVGIcon path={iconPath.botswana} size={25}/>
<SVGIcon path={iconPath.cbia} size={25}/>