style-component中引入icon-font步骤以及出现方块问题的解决

在style-component中引入icon-font：

1. 将下载好的iconfont压缩包，将其中的文件拷贝到项目相关目录下（一般是statics），并将iconfont.css改为iconfont,js

2. 点击iconfont.js 文件头引入style-components实现全局样式设置的api createGlobalStyle

import { createGlobalStyle } from 'styled-components'

3. 将原来的css代码移到createGlobalStyle内，如果后面是直接使用Unicode添加iconfont，最后面三个类可以删掉；类名的方式添加iconfont，后面三个类要保留

注意：移好之后需要进行一点修改！不然使用的iconfont无法正常使用会出现方块，查看报错发现是无法导入字体图标， 问题就在导入font的src url没有办法识别后面的地址字符串，所以我先在上面进行import导入用到的字体图标，然后在url括号里放入对应的js值，也就是用$()的形式

export const IconStyle  = createGlobalStyle`
import icon1 from './iconfont.woff2?t=1623895248082'
import icon2 from './iconfont.woff?t=1623895248082'
import icon3 from './iconfont.ttf?t=1623895248082'
@font-face {
  font-family: "iconfont"; /* Project id 2615678 */
  src:  url(${icon1}) format('woff2'),
        url(${icon2}) format('woff'),
        url(${icon3}) format('truetype');
}

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

//如果后面是直接使用Unicode添加iconfont，下面三个类可以删掉
.icon-ai219:before {
  content: "\e6cf";
}

.icon-Aa:before {
  content: "\e636";
}

.icon-line-quillpenyumaobi:before {
  content: "\e6eb";
}
`

4. 在App.js中引入刚刚导出的IconStyle，并使用

import{GlobalStyle} from './style.js'
import {IconStyle } from './statics/iconfont/iconfont'
function App() {
  return (
    <div className="App">
      <GlobalStyle/>
      <IconStyle/>
      <Header/>
    </div>
  );
}

export default App;