移动端自定义图标

注意事项：1. 每个项目用到的图标不同，请针对项目添加图标相关文件。2. 追加图标时，请在原来图标的基础上新增，保证项目其他图标可用，且保证项目上永远只有一个自定义图标文件

一、安装

注意！！如果项目有native-base的依赖，就不在需要在安装react-native-vector-icons依赖

react-native-vector-icons@6.5.0
@types/react-native-vector-icons@6.4.1

二、link

注意！！如果项目有native-base的依赖，就不在需要再link react-native-vector-icons

react-native link react-native-vector-icons

三、下载图标

通过阿里巴巴矢量图标库，下载svg字体文件素材

四、把图标添加到项目

将iconfont.ttf文件copy到android项目的android/app/src/main/assets/fonts目录下

五、生成图标的映射map

请把以下脚本复制到一个js文件内，并把iconfont.svg的路径修改为正确路径，例：/home/msz/Downloads/font_dyr63jll0r9/iconfont.svg。

然后使用node 执行改脚本，然后就可以在脚本所在目录找到新生成的iconfont.json文件，其中的内容即为图标映射map。

5.1 生成图标映射map脚本

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

const lineReader = require('readline').createInterface({
	input: require('fs').createReadStream('为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.');
		}
	})
});

5.2 图标映射map示例

{
    "fangshai":58887,
    "fendi":58888,
    "jingzi":58889,
    "jinghua":58890,
    "mianmo":58891,
    "penwu":58892,
    "ruye":58893,
    "zhijiayou":58894,
    "kouhong":58895,
    "BBshuang":58896,
    "taozhuang":58897
}

六、声明自定义图标

在项目的atom目录内，添加原子操作icon.ts

注意把glyphMap改为第五步生成的图标映射map

import { createIconSet } from 'react-native-vector-icons';
const glyphMap = {
	"fangshai": 58887,
	"fendi": 58888,
	"jingzi": 58889,
	"jinghua": 58890,
	"mianmo": 58891,
	"penwu": 58892,
	"ruye": 58893,
	"zhijiayou": 58894,
	"kouhong": 58895,
	"BBshuang": 58896,
	"taozhuang": 58897
};

const iconSet = createIconSet(glyphMap, 'iconfont', '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;

七、自定义图标的使用

页面tpl.tsx

import Fdicon from '../atom/icon';

export default function tpl() {
	return (
		<Fdicon name='fangshai' size={50} color='red'></Fdicon>
	);
}

飞道科技

飞道科技文档总汇