React-Native:纯色小图片使用字体库实现

2018-09-11  本文已影响0人  sy随缘

1、为了减少项目中小图片资源,所有纯色图片,都可以使用字体库实现。
2、也可以使用阿里字体库,但是需要转换+link才能使用:
阿里字体库下载下来svg图片,然后将所有图片通过下面的工具,转为ttf字体库,转换的文件夹里有字体ttf文件和对应的selection.json文件,通过icomoon的RN库进行link,就可以在RN中使用了。

常用免费字体库:xcode效果:


image.png

转换之后的文件夹:


image.png

参考链接:
常用免费字体库:
https://github.com/oblador/react-native-vector-icons

阿里字体库:
http://www.iconfont.cn/collections/index?spm=a313x.7781069.1998910419.3

SVG转换为ttf字体库在线工具:
https://icomoon.io/app/#/select/font

 <Icon
                name="ion|ios-search"
                size={20}
                style={{ width: 30, alignItems: 'center', justifyContent: 'center' }}
                color="#CECED3"
              />

import IconFontAwesome from 'react-native-vector-icons/FontAwesome'
import IconIonicons from 'react-native-vector-icons/Ionicons'
import { isEqual } from 'lodash'

const fontFamilies = { fontawesome: IconFontAwesome, ion: IconIonicons }

/*
目的:
应用中的小图标使用字体,减少图片的使用量;打包时减小包的体积
props说明:
name: 字体库|字体名称
size: 字体大小
color: 字体颜色
使用:
1、使用FontAwesome字体库
<Icon
name="fontawesome|check-circle"
size={20}
color="#d0021b"
/>
2、使用Ionicons字体库
<Icon
name="ion|ios-arrow-forward-outline"
size={24}
color="#C9C9C9"
/>
*/

上一篇下一篇

猜你喜欢

热点阅读