iOS
1.通过xcode将‘xxx.ttf’文件引入项目,如图:
在准备好了字库文件后,就可以加到项目中了,是把ttf文件加入到项目中,这里需要注意的是要把这些ttf加入到bundle中,也就是说,最后的ipa文件中必须包含有这些ttf(否则应用中到哪里去找字库呢?)
在加入后,我们可以分别在FileExplore和Build Phase里面看到这些内容,如下图所示:
设置到这里还有最后一步,就是在info.plist文件中加入相应信息,这一步实际上实在项目的Info页里面增加Fonts provided by application项,并设置相应的ttf文件进去,这样就告诉了应用,我要加入新的字体了,对应的字体文件是哪些。
到这里,字库文件应该是准备好了,下面我们需要确认一下字库的名字,因为代码中需要用名字来指定字体。通常来说,这个名字和文件名是相同的,但也有不同的时候,所以这一步一定不要忽略。
获取字体 ,推荐图标库:
IconFont:http://www.iconfont.cn/home/index
Fontello:http://fontello.com/
IcoMoon:https://icomoon.io/app/#/select
步骤
首先获取svg图标(设计师提供或者从图标库下载);
通过Fontello或者IcoMoon提供的方式进行svg转ttf;
在react-native项目中使用ttf;
这里说下IcoMoon:
编辑完成后通过 Generate Font 方式下载,解压,font文件夹中的ttf即为图标文件,json文件记录了图标及图标库的信息。
2.在node_modules/react-native-vector-icons下新建Icomoon.js文件,复制一份Icomoon.ttf到node_modules/react-native-vector-icons/Fonts目录下,node_modules/react-native-vector-icons/glyphmaps下新建Icomoon.json文件。如图:
Icomoon.js代码:
import createIconSet from './lib/create-icon-set';
import glyphMap from './glyphmaps/Icomoon.json';
const iconSet = createIconSet(glyphMap, 'Icomoon', 'Icomoon.ttf');
export default iconSet;
Icomoon.json格式如下:
{
"icon_bofang": 6400,
"icon_cai": 6401
}
想要获得Icomoon.jsom里面的格式内容 .json文件中的key自定随便,到时候使用的时候就用这个key,他的value从下载的字体文件夹中找到,也是一个json文件,打开后其中每一个对象有一个code键,它对应的value就是我们需要的那个值。但是图标的个数非常多,需要写一段代码,获得我们所需要的Icomoon.json里面的格式。
此时,在需要用到的界面引入Icomoon,使用图标,如下图: