专栏首页前端说吧React中,在styled-components基础上使用iconfont字体图标

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 `

踩坑:

代码中,第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 条评论
登录 后参与评论

相关文章

  • JS-完美运动框架(封装)

    xing.org1^
  • js库 - 浅拷贝 & 深拷贝

    学了堆栈内存空间,应该就理解了什么叫简单数据类型存在栈内存,复杂数据类型存在堆内存了。

    xing.org1^
  • 【消灭代办】第一周 - 敏感词判断

      一堆字符串组成的数组,给你一个字符串,让你去查找这个字符串是否在这个数组当中?

    xing.org1^
  • Spark redis的坑

    shengjk1
  • changhuxi.com8万被秒已建站

    三拼域名changhuxi.com上个月一口价8万元被秒。近日,有消息称,changhuxi.com已经被建站了,而且建站主体正是畅呼吸科技(成都)有限公司。

    躲在树上的域小名
  • 锐捷路由技术 | SNTP配置

    目前,因特网上普遍采用了通讯协议来实现网络时间同步,即 NTP (Network Time Protocol--网络时间协议),还有一种协议是 NTP 协议的...

    网络技术联盟站
  • 笔记 | GWAS 操作流程1:下载数据

    这里,总结一下GWAS的学习笔记,GWAS全称“全基因组关联分析”,使用统计模型找到与性状关联的位点,用于分子标记选择(MAS)或者基因定位,这次学习的教程是p...

    邓飞
  • Augustus:真核生物基因结构预测软件-安装篇

    组装得到基因组序列之后,进一步的工作就是探究基因结构。Augusust是一款预测真核生物基因结构的软件,官网如下:

    生信修炼手册
  • 几种计算机语言的评价(修订版)

    编程新手都有一个同样的问题:"我应该学习哪一种语言?"。 《Unix编程艺术》(Eric Raymond著)第十四章,对各种语言进行了评价,正好可以用来回答这个...

    ruanyf
  • 你是否也很专业?

    关于这个话题,是来自于一场会议。当时公司里进行2015年的年度总结汇报,好几位同事都说出了“你很专业”的评价,但当提到为什么觉得很专业时,他们觉得自己不懂,也不...

    崔文远TroyCui

扫码关注云+社区

领取腾讯云代金券