react练习项目,全局引用后icon变成方块问题

首先这是我的iconfont.js文件代码

import {
     createGlobalStyle} from 'styled-components';

export const GlobalIcon = createGlobalStyle `
@font-face {font-family: "iconfont";
  src: url('./iconfont.eot?t=1578361681880'); /* IE9 */
  src: url('./iconfont.eot?t=1578361681880#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAP4AAsAAAAAB9wAAAOsAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDHAqDIIMAATYCJAMQCwoABCAFhG0HPRvnBlGU7kmD7M+IYsTN7tUXQEBEO6sWm5YRVXliEgieg4uy73m54f2ZrWiS748y8T+dGEpPMBtYQDx8jf3v3N373t8v4ojadBLVPCRCYUgQOqESLTSm/+loNrlctv3S8u8QJgO29Xplc5+/kptcviroDqFQMP6EQiLRqNIs42lAHub/bnDD1GrrugzbNuE68qonMOJDEZjnwOd/1mdaJfH7f6auPlcAxcQ4G+QMKhTymSGkwfVV6SSWuPu8rnghitUaHiVz0meo73+OmS7F8wPNJStwOMBx297AogNkwHciJ+Y3jF15EdsJ9FnSKHJpenET0pLRLxCPuKVBOiWXNamhCd2SqdkbzyW08rQMeOb/fnzRHmmKTmUMvXxnyoTR901D/nPoIjDG04LNomIXkMS9Uv0NsdC/S0yf0jruCNA0hbHquocfMffCb+a/PKoiiC4jeQAcQoHK+yabHgu6oVSBghAybyA3QYMlegy8ZIgXxnlequMTBIGgZnMY/Hhwb40/UKD4K9RiVkJl+vD+7MBmqCcQ8gdTz1qnBoozeAQxjmp0REs81D0jnDlHDwAAdUPWXs2Gdmb95c2Bgx3AGfTcA+Z+f4N/f6Gfn8D3d9Li+gNqssXv7+gaLVia3d8e77nVSoFiVDZulpZ9tyrVMJu2IThu08sd7aO+gegRg3F8t9Vq1ev9BZdif1MeVUtLXkKY74PfRxfu9X77rSsBkGb7rK/xjgce9QITDqkQbPdhE2124+9xaOCJSYf+E3CtCL5ncNGkIIoj3jiycM2y6OOLAjk1TIXy6AOmoJOnfsjgk1+eqT/7t9q0f3yA/+qrmo+fSlvdSP9FBMGJd09dbfBrkwQb/dag7b/Uj/EjGK0Zf6xRNgCSswxFpsyw9etAM6Z9N40uNM76T2HGvI9hnASxNjTOgFD0WISq2YRM7C7o6HcIupqz0Genmdn9xkkxkb3Y4RpAGBFCMeQtVCNekIl9g44pf9A1EjHocyXqluy3JTiZkKgpNKlepdwQHrNUigSp62gVHU0mWT5uG2XAXbStuTUbmkEP5RgjgpLVrhSjTAqXToPd0HEE9aUooKGa80r5/S0trOxDzYZwgbhIQhoFmShdFcUZBA9ziysk9/PrkKXIoZE1eRXybUgK8OapNs1aWyBn+F6rvGu5JVBiaacoDMVIgouaBlrkmH6B8ss7FSCD0izfw+vr14IKsbb85vmF7hMugT7GWRklamR0lAOHomNaZkmzPM44SgA=') format('woff2'),
  url('./iconfont.woff?t=1578361681880') format('woff'),
  url('./iconfont.ttf?t=1578361681880') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
  url('./iconfont.svg?t=1578361681880#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;
}
`;

然后这是我引入组件的代码:

<span className="iconfont iconAa">&#xe636;</span>

然后照着网上的方法加入下面两句话,再App.js里面引入内容
react练习项目,全局引用后icon变成方块问题_第1张图片
然后出现报错
在这里插入图片描述

import error: './statics/iconfont/iconfont' does not contain a default export (imported as 'GlobalIcon').

然后更改App.js里面的引入文件形式 加入{}
react练习项目,全局引用后icon变成方块问题_第2张图片

修改前没有{ } 加入后,小方块消失,显示iconfont内容。

在这里插入图片描述

你可能感兴趣的:(学习笔记,reactjs)