React中,在styled-components基础上使用iconfont字体图标

styled-components官网

巧妇难为无米之炊,先准备米:

  1. 从iconfont官网选取图标

  2. 添加购物车
  3. 在购物车添加项目
  4. 项目中生成代码
  5. 下载代码包到本地

这套流程应该娴熟到不用看上边的文案。

重点来了,

怎么在style-components中使用iconfont:

提取下载的字体文件到项目的src>assets>fonts文件夹中(当然可以根据你的项目决定其他的路径)

提取iconfont.css代码到全局style.js文件中的GlobalStyled的createGlobalStyle``中,用于全局通用。

 1 // import { injectGlobal } from 'styled-components';
 2 // injectGlobal`
 3 //   body {
 4 //     margin: 0;
 5 //     font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
 6 //       'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
 7 //       sans-serif;
 8 //     -webkit-font-smoothing: antialiased;
 9 //     -moz-osx-font-smoothing: grayscale;
10 //   }
11 // ` // 以上代码被弃用。新写法是下边这样:
12 import {createGlobalStyle} from 'styled-components';
13 export const GlobalStyled = createGlobalStyle`
14     ...上边是其他全局reset代码
15     @font-face {font-family: "iconfont";
16         src: url('../fonts/iconfont.eot?t=1583658254672'); /* IE9 */
17         src: url('../fonts/iconfont.eot?t=1583658254672#iefix') format('embedded-opentype'), /* IE6-IE8 */
18         url('data:application/x-font-woff2;charset=utf-8;base64,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') format('woff2'),
19         url('../fonts/iconfont.woff?t=1583658254672') format('woff'),
20         url('../fonts/iconfont.ttf?t=1583658254672') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
21         url('../fonts/iconfont.svg?t=1583658254672#iconfont') format('svg'); /* iOS 4.1- */
22     }
23 
24     .iconfont {
25         font-family: "iconfont" !important;
26         font-size: 16px;
27         font-style: normal;
28         -webkit-font-smoothing: antialiased;
29         -moz-osx-font-smoothing: grayscale;
30     }
31 
32     .icon-sousuo:before {
33         content: "\\e639";
34     }
35     ...下边是其他icon字体定义
36 `
style.js

踩坑:

代码中,第33行这种地方,是需要修改原来的iconfont.css代码的。

这里因为createGlobalStyle``里边是js的字符串,所以字体图标的类似

.icon-sousuo:before {
  content: "\e639";
}


得将"\"转义下,改成

.icon-sousuo:before {
    content: "\\e639";
}

然后html代码中className="iconfont icon-sousuo"即可出效果

<i className="iconfont icon-sousuo" />

源代码路径:https://github.com/xingorg1/JuFengGuo/blob/master/advanceCourse/react/jianshu-project/src/assets/styles/style.js#L69

  • 添加到短语集
    • 没有此单词集:英语(美国) -> 中文(简体)...
    • 创建新的单词集...
  • 拷贝
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值