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里面引入内容
在这里插入图片描述
然后出现报错
在这里插入图片描述

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

然后更改App.js里面的引入文件形式 加入{}
在这里插入图片描述

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

在这里插入图片描述

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值