react-native系列(12)图标篇：使用阿里字体库iconfont图标和svg详解

在前端开发中，经常会用到iconfont图标库来管理图标，在RN开发中有时候同样需要如此。在百度上搜索过RN相关的图标管理方案，发现都较为复杂。于是写下了本篇博客，为大家介绍另外两种更优化的图标应用的方案，供大家学习参考。

iconfont图标

该方案同样适用于字体变更。从iconfont库下载好图标脚本，结构如下：

打开iconfont.ttf文件，我们看一下字体全称是什么？正常情况下都是iconfont，先记下。

在app根目录中创建新目录src/assets/fonts用来存放字体文件，将 iconfont.ttf 拷贝到该目录下

打开package.json文件，配置字体路径

  "rnpm": {
    "assets": [
      "./src/assets/fonts/"
    ]
  }

执行以下命令，执行完成后，重启编辑器

react-native link

重启后会发现该字体文件已经自动拷贝到 android/app/src/main/assets/fonts目录

和配置到Info.plist文件中

此处要比对一下字体名称是否与开始的字体名称相一致，如例子中为iconfont字体

至此，已经完成了全部配置，那么开始使用图标吧。打开iconfont的浏览页面：

这里用到的是后4位字母为标记，引用时使用{'\u'+后4位字母}，通过style中的fontSize来调整大小。

贴上代码

import React, { Component } from 'react';
import { View, Text, StyleSheet } from 'react-native';

class IconfontComp extends Component {

    render(){
        return(
            
                iconfont引用:
                {'\ueb61'}
                {'\ueb62'}
                {'\ueb63'}
                {'\ueb64'}
                {'\ueb65'}
            
        );
    }
}

const styles = StyleSheet.create({
    viewStyle: {
        flexDirection: 'row',
        marginTop: 10
    },
    iconStyle: {
        fontFamily: 'iconfont',
        fontSize: 24,
        marginTop: 10,
        marginLeft: 10
    },
    svgStyle: {
        marginTop: 10,
        marginLeft: 30
    }
});

export default IconfontComp;

效果：

如果有疑问可以也可以参考一下这篇文章（需要）：https://medium.com/react-native-training/react-native-custom-fonts-ccc9aacf9e5e

svg图标

除了上面通过字体文件的方式引用图标外，还可以通过svg的方式引用图标。

首先需要安装react-native-svg插件

npm install react-native-svg --save
react-native link react-native-svg

引入react-native-svg插件之后，就可以在react-native中编写svg图标了。将iconfont上的图标以svg的格式下载，会得到后缀名为.svg的文件。用记事本打开.svg文件，内容格式如下：

记住，我们只需要svg标签部分，将红框部分拷贝下来，并将这部分代码粘贴到渲染容器中，如例子中黏贴至View容器下。

贴上代码：

import React, { Component } from 'react';
import { View, Text, StyleSheet } from 'react-native';
import Svg, { Path } from 'react-native-svg';

class IconfontComp extends Component {

    render(){
        return(
            
                SVG引用:
                
                    
                
                
                    
                
            
        );
    }
}

const styles = StyleSheet.create({
    viewStyle: {
        flexDirection: 'row',
        marginTop: 10
    },
    iconStyle: {
        fontFamily: 'iconfont',
        fontSize: 24,
        marginTop: 10,
        marginLeft: 10
    },
    svgStyle: {
        marginTop: 10,
        marginLeft: 30
    }
});

export default IconfontComp;

粘贴后，有三处需要更改

• svg标签改为react-native-svg插件中Svg
• path标签改为react-native-svg插件中Path
• width="32px" height="32px"改为width={32} height={32}的写法

重新启动服务，效果：