React-Native:纯色小图片使用字体库实现
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"
/>
*/