React实战——使用iconfont

1、下载需要的iconfont

1. iconfont官网
2. 把需要的iconfont添加至项目，并下载
   
   
   

2、精简下载包

1. 建立文件夹 ./static/iconfont
2. 把下载包解压到上面的文件夹中， 并留下有用的文件
   
3. 把 iconfont.css 改名为iconfont.js，并全局引用
   • 注：把 @font-face 里面的 iconfont开头的 前面加上相对路径 ./
   • 把下面伪选择器的那些删了

import { createGlobalStyle } from 'styled-components'

export const IconStyle = createGlobalStyle`
@font-face {
  font-family: "iconfont";
  src: url('./iconfont.eot?t=1587005106329'); /* IE9 */
  src: url('./iconfont.eot?t=1587005106329#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('data:application/x-font-woff2;charset=utf-8;') format('woff2'),
  url('./iconfont.woff?t=1587005106329') format('woff'),
  url('./iconfont.ttf?t=1587005106329') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
  url('./iconfont.svg?t=1587005106329#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;
}
`

3、使用iconfont

1. 在你要的组件中引入

import {IconStyle} from '../../static/iconfont/iconfont'

2. 在一个 <IconStyle /> 下使用 <i className='icon'>[iconfont代码]</i>

render(){
        return (
            <Wrapper>
                <IconStyle />
                <i className='iconfont'>&#xe60d;</i>
            </HeaderWrapper>
        )
    }