react-native-vector-icons使用(二)
来源:互联网 发布:985 211 知乎 编辑:程序博客网 时间:2024/06/05 12:05
react-native-vector-icons使用(二)
使用react-native-vector-icons大多都需要自定义,将项目图片转为ttf字体图标进行使用。框架的使用及自定义详细见:https://github.com/oblador/react-native-vector-icons
推荐图标库:
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:
1. 通过 Import Icons 导入自己的svg图片
2. 对svg图标进行编辑
一般都是将Scale设置为fit to canvas, Alignment设置为Align to
3. 下载ttf文件
编辑完成后通过 Generate Font 方式下载,解压,font文件夹中的ttf即为图标文件,json文件记录了图标及图标库的信息。
自定义
官方文档中自定义字体图标有3种方式,其实后两种都是基于第一种,分别是对Fontello和IcoMoon两种方式导出字体库文件的封装。以IcoMoon方式为例:
其中图标对应的信息为”icon”
(1)使用方式三。直接将解压后的.json文件复制到icons库中,使用createIconSetFromIcoMoon方式创建图标字体;
(2)使用方式一。从解压后的json文件中提取每个icon下properties下的name和code的值作为key和value,生成新的json文件,使用createIconSet方式创建图标字体。按icons库提供的方式添加icomoon.js文件,代码如下:
import createIconSet from './lib/create-icon-set-from-icomoon';import glyphMap from './glyphmaps/selection.json';const iconSet = createIconSet(glyphMap, 'icomoon', 'icomoon.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;
- react-native-vector-icons使用(二)
- react-native-vector-icons使用
- Andriod如何使用react-native-vector-icons
- react-native-vector-icons 图标库的使用
- react-native-vector-icons的使用
- react-native 使用vector-icons图标库
- React Native react-native-vector-icons 使用小记
- 使用react-native-vector-icons 库报错 react-native-vector-icons 以及使用方法
- react native vector icons 乱码
- react-native-vector-icons在tab中的使用代码示例
- ReactNative开发中使用react-native-vector-icons
- React-native开发之图标库react-native-vector-icons 的集成使用
- React native 自定义IconFont react-native-vector-icons
- react-native-vector-icons的简单使用,图片,按钮,标签视图,导航条
- ReactNative系列之十二图标组件react-native-vector-icons的使用
- react-native开发踩坑之 ios上react-native-vector-icons 的error:unRecognized font family 'FontAwesome'
- react-native试玩(35)-react-native-icons插件
- React Native学习(二)
- java读取文件数据进行一些简单处理的例子
- VLAN
- Ionic2 Scss
- php 栈操作匹配括号( )
- nodejs使用multer中间件上传混合表单提交(文件和非文件普通文本域)
- react-native-vector-icons使用(二)
- 几个Linux函数的使用
- Java读取文件内容的几种方式
- 红黑树
- 搜索--04
- mysql 事务 MySQL视图
- windows设置MongoDB服务
- VPN账号可以两个人同时连接吗
- 第十届河南省acm省赛参赛总结