安装和配置react-native-vector-icons
- 根目录下使用
npm install react-native-vector-icons --save
- 安装完成后运行
react-native link react-native-vector-icons
命令link这个库 - Android端的配置:
打开android /app/src/main
中并创建了assets/fonts
的目录 黏贴node_modules/react-native-vector-icons/Fonts的文件
接着我们要在android/app/build.gradle
文件中添加以下内容:dependencies { ..... compile project(':react-native-vector-icons') .... }
阿里矢量图标库iconfont的使用
- 选择需要下载的图标,下载svg格式 前往
- 解压zip文件,可以看到文件夹中有以下文件 其中
demo_unicode.html
包含了所有图标对应的unicode字符,我们就是用它来显示图标。 - 将iconfont.ttf文件分别copy到Android和iOS工程目录下。
Android放置在app/src/main/assets/fonts
文件夹中 - 生成iconfont.json 直接使用unicode编码的方式引用字体图标不怎么直观,毕竟都是unicode编码,还容易拼写出错。这边我们需要使用个脚本工具
iconfont_mapper.sh脚本文件和iconfont.svg放到同一目录中,打开命令行或终端,执行以下命令:
./iconfont_mapper.sh iconfont.svg