在styled-component下，使用iconfont图标

1. 使用API createGlobalStyle ，在下面创建一个 IconFontStyle 变量

import { createGlobalStyle } from 'styled-components';

export const IconFontStyle = createGlobalStyle`
  @font-face {font-family: "iconfont";
    src: url('./iconfont.eot?t=1569291927717'); /* IE9 */
    src: url('./iconfont.eot?t=1569291927717#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAPIAAsAAAAAB9QAAAN8AAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDFAqDGIJ5ATYCJAMQCwoABCAFhG0HSBvjBsiO1FZzhFEkL+Lhv/1+v8/ceTYP9aTafXWSSSIRCqFBgkpphAahkwgFvpTAT7+pD6hCqk5nUlMnyUGIwcjN/U/M/H8up9eyBOa3LJdbkxpr0A0/6gUYBxTQ3tgGCbhAAvOW4bWL6SBPEyim9EAc5hRVgZ0MTwrEvShwYJfxyg3q0BTqFSuzeAFrzfREngHwHHw//kNE2JHUKnjm0V22FtK+3Z/FUMP+D4MmDwFyujCUdVRYBjJxWxk9R0XVZZRiHWZlFajLQvr2eBbz/z9T4oGXbZLb/+NVElGHlR1gG2oV3+7MTfDtQVSJMaCQ4GNITZA9AG+ArRMelWRpSGXXHGScRvrz+68T167VXLlSdfVq9cTrqWjqxNXDB1y/XpvGSu5y7ZoTfayqog1MfcO0QHqOdx23m5kIUKJ80BPOEcNra4cHOyRVb1kBw1YyEw8TxEmtEFo7HHrUTJsCVQPa6hkdvDssOeXr2TjLT/Cqnb16+9aO1Tuv9khss3XsuuoipZKTDx+eTBEUML7rpMNHJpOpcterjo6vvpG+0Q+/UaPWrx+FWAoi5CgywXwU3gsO8LkXu2RdRI7/1ZnX9Cml1WSGWky5bvU7xYKPxoUS1nshUtca0aGZKUxLeNJSi0/7ePz27fixYyD8Vc2Tyf0ToxoIMh5LwDmiR7v5PL8/fnP+7dm9tvkP9PJmPDf7vsiPbFj4Xd/bZ2xxjkdJNsgAvwepA1R6YPhvgPpwqp4a/PN+4+jT51WrU9JXOyaDr/Xzp0P6d7gVdIuD5j3Fgl9FdmzKNo19OZsMI5xYtp4aJaEo+EVa6HNvCmmws5LQNJhA0jAJlaZpQ7YsQ03bNtQ17UCxJHd9Wz8FJXILi0YjCD3WQ9LlHSo9zhqy5S7UDHkLdT1BQXEcbju2zYZIZyqIw0jLqvuzokYy8zSA6VBdgYTeRk5J04GtBikWscCGh4TlG7nIjJQp5lj6CBEY8yyvSCY2B52HjEaJlRVJjzQ4RIexnBAayle9KEQjmYB2QIFwMESLpdYfS6QhMeO99hhd+HwFRNCbEUdp0LU8ayAKC7F7VrgQYR0MuYK5k+5WLrHoQxABw3gsnkJiwspBYcRIqhKWXD1MD9HAQugGlGUJQoVWfFchZHnJ9IY7oMC75EhRRY6acseZBS2nF70Mmc6pHmFAT40OaQyiGQA=') format('woff2'),
    url('./iconfont.woff?t=1569291927717') format('woff'),
    url('./iconfont.ttf?t=1569291927717') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
    url('./iconfont.svg?t=1569291927717#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;
  }
`;

###注意：

1. 用‘’ 包裹的样式
2. 此代码为iconfont下载包里的css文件改写

2. 在对应的index.js里引入这个组件

import { IconFontStyle } from '../../statics/iconfont/iconfont';

  

import React, { Component, Fragment } from 'react';
import { connect } from 'react-redux';
import { CSSTransition } from 'react-transition-group';
import { actionCreators } from './store';
import { IconFontStyle } from '../../statics/iconfont/iconfont';
import {
    HeaderWrapper,
    Logo,
    Nav,
    NavItem,
    NavSearch,
    SearchInfo,
    SearchInfoTitle,
    SearchInfoSwitch,
    SearchInfoItem,
    SearchInfoList,
    Addition,
    Button,
    SearchWrapper
} from './style';

class Header extends Component {
    render() {
        return (
            
                
                
                    
                    

reference:

https://www.jianshu.com/p/4c69abc91971

https://blog.csdn.net/wangjjz/article/details/93768017