react项目中引入在线的iconfont 图标

1.我们在使用字体图标的时候，有时候ui库的字体图标不能满足我们的需求，我们这时候需要引进外部的icon，这里我们用到的是https://www.iconfont.cn/

2.字体图标库分为线上和线下的，线下的不用多说直接下载解压，把css文件cope到项目中去即可，当然我们有时候不需要下载下来去引用的话，这一方面节省更小的项目大小

3.在登陆字体图标库的时候，我们先新建项目然后再选择Symbol，如下所示：

4.打开iconfont搜索图标并且添加到购物车，将购物车中的图标添加到项目中，若是新项目，则可以新建项目

5.选择symbol方式，生成在线链接，如下图所示：

6.将生成的链接复制到react项目public目录下index.html文件中，通过script标签引入，如下图所示：

7.在项目中需要使用到图标的地方用以下svg标签方式引入，你复制的icon代码需要在前面加上#哦

 render() {
    return (
      <div className="App">
        <div className="App-header">
          {/* <img src={logo} className="App-logo" alt="logo" /> */}
          <Child1 count={this.state.count} />
          <Child2 onIncrement={this.onIncrement} />
          <h2></h2>
            {/* 字体图标 */}
          <svg className="icon" aria-hidden="true">
            <use xlinkHref="#iconfenxiang"></use>
          </svg>

          <Button>Start</Button>
        </div>
        <p className="App-intro">
          你可以在 <code>src/App.js</code> 文件中修改。
        </p>
      </div>
    );
  }

8.需要修改样式的话，在引入的单独的css文件中修改即可：

.icon{
width: 50px;
display: block;
}