iconfont的使用(搭配styled-components)

建议边看边操作。

此处以放大镜为例。
首页地址：

iconfont.cn

进入首页，搜索框输入“放大镜”

选择你喜欢的图标，鼠标悬浮在图标上时，会有三个图标出现，点击第一个小车图标，加入库。
然后看到右上角购物车多了一个红点，且标为1，点击购物车图标，出现侧栏

点击添加至项目，可加入已有项目，也可新建项目（有一个带加号的文件夹图标就是新建项目），可以多挑几个一起加入项目
添加至项目之后，会直接跳转到项目页面。
默认unicode 点击 下载至本地，
解压缩，删去原本的iconfont.js, 将iconfont.css改名为iconfont.js.
删去一部分不必要的文件，最后的文件目录

我是结合styled-components用的，自己觉得还是挺好操作的。

  npm install --save styled-components

然后在需要使用iconfont的页面的样式文件中写如下代码，IconfontStyle内部的代码是iconfont.js(iconfont.css改后缀得到的)的内容，删除了一点没用的代码。留着@font-face和.iconfont的内容。
注意：
此处@font-face里，src: url('iconfont.全部替换为src: url('./iconfont.

import { createGlobalStyle } from 'styled-components'

export const IconfontStyle = createGlobalStyle`
@font-face {font-family: "iconfont";
  src: url('./iconfont.eot?t=1582282309674'); /* IE9 */
  src: url('./iconfont.eot?t=1582282309674#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAALoAAsAAAAABpAAAAKcAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCCcAqBGIEyATYCJAMICwYABCAFhG0HNBvcBcgekiSQKAUR8EMVABAhgmote/b2KUQKAD1LAiHDRsRGsfMxPuXZiBu0q3JmnSMxyGidzQHqoA5SUQkPFd2X/wFvwDHTRflA8oDm1klRyZGAA5sOKKppZBvIA/gPY1eL5SGeJtBkkC+d3fTcUmAsQ5MCcS/yFDDOeWTZiNeFas3KLJ4ZqKfH9AB4kr+Pf8FhTFIpoKKjyzQWJH6Z46TioexVywm8QFDWV1BgHpCJs9rIAT1hMPU0RfSNAvvKD77My5KbxV7/eaIK5baAfii8JxEV32puAjnuXAbsjZpBWtJpK//6o/zLl/EPxOj9nDFRMbe0uO768aX87UvfV3D7xGfR5/dSe/vpXoeymYmdPsc4a7epKeW4RUlHX2LiSso5Ke7rS1m+SFnp70t2OC13/X/3/NPg1vebd3FhasTQLGSJ4lDE7NspklrHTdDowh3nnc3NezgKb0EigHKm+F0c/sa/8R5RbbCK/WdslsFn09c06SpnMuhnA+onswY/TdSzIfsSZErZFdXakuVRExOaNKEEqqPLn7Ha3jtMhLre+7TVDKQo1I0TM3UeFc3WUVW3gSZzMtY364bpidzArCGA0OEASZsPFDo8EjP1Nyr6/EVVR+ihyUXY7dhsMkTTFIwoglhIt0GRUSk5YiGmUX4x4pvkFM5KJKscYa3oh0H+gcV4BlIiPMccbTMfTAgHOaxSwHRwHpLLVVCNVRJiiL9AiDo6IICr+5A/o1IAUzswhEIgLIjWBhIxVJQ43p4wLX2/GMJrIkfBLSU9/nIIpiV2DwXxF9iDmKFU9iq5l3e0mvGCEQQH4mAqClA6GIbIyalA6vphEoRB+BNGhNSiBeBWXF+l//pqxQcUGBUgXQrcq9B0SSl5lpJEbgAA') format('woff2'),
  url('./iconfont.woff?t=1582282309674') format('woff'),
  url('./iconfont.ttf?t=1582282309674') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
  url('./iconfont.svg?t=1582282309674#iconfont') format('svg'); /* iOS 4.1- */
}

.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
`;

删除iconfont.js中的内容（划重点）
最后在index.js里导入引用就好了。

import { IconfontStyle } from './style'

render里这样写

render() {
    return (
          <Fragment>
            <IconfontStyle/>
                <li>你用的图标的代码(例如&#xe610;)</li>
            </Fragment>
    )
} 

图标代码在项目页可以找到，项目页里，把鼠标放到图标上，就能看到“复制代码”，点击即可。

<IconfontStyle/>

是一个闭合标签。一定放到所有iconfont引用之前。
不一定非要

标签

import { 
   IconfontStyle,
   Button
} from './style'

render里改成

<IconfontStyle/>
<Button
  onClick = { handleClick }
  className={(inputVal !=='' || focused || mouseIn ) ? 'focused iconfont ' : 'iconfont'}
>&#xe60c;</Button>

style.js 去除button默认样式，加个cursor

export const Button = styled.button`
    margin: 0;
    padding: 0;
    border: 1px solid transparent;
    outline: none;
    cursor: pointer;
`;

这样，iconfont里可爱的小标签你就可以随便用啦。