4、添加 Iconfont

现在我们来看看列表页的交互逻辑，在点击一个列表项后，就会进入对应的详情页。一般来讲，可点击进入下级页面的列表项应该在其右侧加一个右箭头 > ，这样可以从视觉上让用户感知到这个列表是可点击的。

由于 Yo 3 中已经内置了这个图标（Yo 3 自带字体图标一览），所以我们直接引用就好了。

<List>
    renderItem={(item, i) => [
        <div key={item.key} className="flex">{item.text}</div>,
        <i key={`${item.key}${item.key}`} className="yo-ico">&#xf07f;</i>
    ]}
    ...
</List>

可以看到这里返回了一个数组，这是 React 16 的语法（详情可见 React v16.0），Yo 3.1.x 已经全面转向 React 16 了。

现在你应该可以看到列表项的右箭头了，整个页面页显得更正式了一些。让我们更进一步，把左上角的那个“点我”文字换成客服图标，不过 Yo 3 里并没有内置这样的图标，所以我们不得不自己添加图标了。我们推荐使用 YIcon 来管理字体图标，Yo 3 的默认字体图标就是在托管在 YIcon 上的。

打开 YIcon 登陆，新建图标项目，我们把它叫做 hy_fe_demo，在公开项目中搜索一个图标，把它加到新建的图标项目中。让后选择配置 source 路径，这里首先要在 gitlab 仓库中 source 组里创建对应的项目（需要联系该组的管理员），再来填写该项目的路径，弄完后，点击同步 source 即可将 icon 文件同步到 gitlab 仓库和图标资源服务器（s.qunarzz.com）上。

弄好了这些后，我们需要将 Yo 3 的图标字体路径修改成我们新建的字体项目的资源路径，在 src/yo-config/core/config.scss 文件中加上：

$ico: (
    // {Boolean} 是否使用图标字体
    is-use:     true,
    // {String} 图标字体文件名
    font-name:  hy_fe_demo,
    // {Url} 图标字体路径
    font-path:  "//s.qunarzz.com/app_utils/fonts/1.0.0/"
);

替换“更多”为图标字体：

render() {
    ...
    return (
        <div className="yo-flex">
            <Header title="列表页" right={{ title: <i className="yo-ico">&#xe21c;</i>, onTap: () => alert('hello') }}/>
            <List>
                ...
            </List>
        </div>
    );
}

刷新一下页面，可以看到列表页右上角的更多变成了我们选择的图标，但是也可以看到之前的图标都失效了。这是因为我们新建的字体图标库没有引用 Yo 3 自带的图标。所以为了保险起见，我们把 Yo 3 用到的所有图标都复制到新建的图标项目中。

首先到图标库里选择 Yo，然后把所有的图标都加到购物车中。

点击购物车，选择保存到已有项目，选择我们方才新建的项目。

然后进入我们的图标项目中，选择同步 source。

因为之前已经建立了一个版本（1.0.0），这时 YIcon 会提醒我们选择升级的类型，这里我们选择小版本迭代，点击确认。同步成功后我们会看到图标的版本升到了 1.0.1。

因为版本升级了，所以我们得再去更改下图标字体的路径：

$ico: (
    // {Boolean} 是否使用图标字体
    is-use:     true,
    // {String} 图标字体文件名
    font-name:  hy_fe_demo,
    // {Url} 图标字体路径
    font-path:  "//s.qunarzz.com/app_utils/fonts/1.0.1/"
);

然后等图标资源服务器准备好了之后（大概 5 分钟左右，会有 QTalk 通知），刷新页面就能看到之前的图标恢复正常了。

这样整个教程就到此结束了。我们讲解了 Yo 3 组件 和 Yo-Router 的基本使用，引入了 Redux 数据流框架来管理我们的数据，使用 YApi 模拟了数组相关的后端接口，使用 YIcon 管理了该项目的图标。

有了这些，我们就能够真正的去开发一个比较复杂的项目了。当然在开发过程中，可能还会遇到一系列的问题和挑战，这些就需要我们去探索和解决了。总之，在使用过程中遇到的一些问题，欢迎向我们提出反馈，我们会力所能及的为你们提供支持。

最后，祝你开发愉快。:-)