react styled-components 使用Iconfont的使用

1、登录iconfont.cn
2、点击图标管理->我的项目
右上角文件+ 来创建一个项目
在这里插入图片描述
3、选择自己想要的图标,加入到购物车
4、点击购物车,将所有的图标加入到项目
5、点击下载至本地
6、解压下载的包,下图中的文件是 有用的
react styled-components 使用Iconfont的使用_第1张图片
7、新建一个iconfont文件夹,将上图中的文件放入
修改iconfont.js文件如下

import {createGlobalStyle} from 'styled-components'
export const IconfontStyle=createGlobalStyle`
  @font-face {font-family: "iconfont";
    src: url('./iconfont.eot?t=1561539542249'); /* IE9 */
    src: url('./iconfont.eot?t=1561539542249#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAO8AAsAAAAAB8AAAANtAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDHAqCeIJgATYCJAMQCwoABCAFhG0HShvUBlGUDkqQ7OeA2xofV+i8ki4Imq8sxe7tKrMyemSOiof/9vvfPjPn3T/fNIlJ9dVJrK5WGiQogdIpmVA8k9/V2t6RknY6nhiSadJ+snfcq0ynZVIiRAiNgXk1PLc3tO2sN5MyVKkEIjMqgX1hk1Pq4FjylzVYnr29S1RyVOIDPrc+WFQuaTjQDWTucyDeuszDBIYs6tHv4843rS0ZowLxRiyJ1k5pZU18aEJXsjDFV/Ja+VwO8cX//fjnNBpFrzKOevBsw7X5T56GG/oNaPWThvHM4JZRsU+TxItS6yNm6NlnGlK6Wy5pmqYwVptP//9T/L1Im2mj9P7nRceIHQHn8FZ+YjMo/FSiTDb4N5CeoMFFe0XzjYGd98WpyKHMbm6ktdllaHXHvEMJVj46oVeCl2PhOIFVEFkkblg1vnJDXF/jl5c5V1dY20041q7v3MnJkW5uCFbZG6gjuEoOIkXJlA4zpM+AxF5A2wBgKJDVodZjsJEgGv3LQ7C5IaBhGG3bAEEfbiHU1H90/Px8fERxsDg+HhmxtrZFmtYbCPjDwwHrd9Zj3p5Wll4LQNAUMjZW71IO3NW+k5M+uBd2xTDLwka9cEyZy/vYuMdwec9ufj00PAzVmyyo6mGwIIZZFr4NsPos/swh5oyv9k+jryVh6RgUxRGH3ch9hxWXbAW4g/KRbvmOuFiVjiZHBD0wiJIDQ91vI9s3WzMgBv2GVIKbfcotPA7r2P/rav1nf2OtwiKDqR5iwv82nOBHOdcQ9OO9eF5r3h8qSPQ/svECQ5cpC22uZkvHiVEKhgzhvwSY8htDOXvzvtDMxlAMWICqWUckZh96hp1Dp7mCIXt2y4dNS5kiB7HrRSBMeEMx5jtUEz6IxHyhZ84fOhNRYcjDmN5w2Ga8RO6KkOTIgVMJYm4UCsuQd4P4C8rCJ2lS4JMfmGbKDp5uHln/DkNMx5hSXCYnJSUCBEVRAHHkOPT9CAqKIhdZPhCV5PHM3V1Q9kkDbn6gdd1JISKHOEA1gMJEQsKtnuvmfv4CSQUfkdaUVZgfUCqjOgdjA6MWiJ00bFV2Lc9kStJELicAIRUJgC0xI9/0REBc3s+FmNzAs4crNjOkKom20sH88uAJ18AQ4w0yStTI6Bn7KCYhVTGGTPlTH+QZO5ScuMp1GzdsTQMAAAA=') format('woff2'),
    url('./iconfont.woff?t=1561539542249') format('woff'),
    url('./iconfont.ttf?t=1561539542249') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
    url('./iconfont.svg?t=1561539542249#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;
  }
  `

引入:import { IconfontStyle } from ‘…/…/statics/iconfont/iconfont’

react styled-components 使用Iconfont的使用_第2张图片

到此,整个引用 过程完毕

你可能感兴趣的:(react,react-redux)