react-native-vector-icons 和 自定义字体图标

安装和配置react-native-vector-icons

1. 根目录下使用npm install react-native-vector-icons --save
2. 安装完成后运行react-native link react-native-vector-icons命令link这个库
3. 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的使用

1. 选择需要下载的图标,下载svg格式 前往
2. 解压zip文件，可以看到文件夹中有以下文件 其中demo_unicode.html包含了所有图标对应的unicode字符，我们就是用它来显示图标。
3. 将iconfont.ttf文件分别copy到Android和iOS工程目录下。
   Android放置在app/src/main/assets/fonts文件夹中
4. 生成iconfont.json 直接使用unicode编码的方式引用字体图标不怎么直观，毕竟都是unicode编码，还容易拼写出错。这边我们需要使用个脚本工具
   iconfont_mapper.sh脚本文件和iconfont.svg放到同一目录中，打开命令行或终端，执行以下命令：

   ./iconfont_mapper.sh iconfont.svg
   ​​​​​​​

   ​​​​​​​

 

来源：oschina

链接：https://my.oschina.net/u/1782320/blog/1942555