在styled-components中使用iconfont

目录

iconfont的使用

在styled-components中引入iconfont

---

iconfont的使用

进入iconfont-阿里巴巴矢量图标库官网

将想要的图标加入购物车，点击右上角购物车可以将图标“添加入项目”。没有项目可以新建个项目。项目设置中，字体格式将EOT,SVG,Base64全勾选上。

 

 

 在代码中使用时可以引入在线链接或下载至本地。

在styled-components中引入iconfont

安装styled-components

npm install styled-components --save

将iconfont中项目下载至本地。目录大致如下，将.eot .css .svg .ttf .woff复制到自己代码中的文件夹下

 在自己的代码中，需要更改iconfont.css文件名为iconfont.js，内容更改如下。由于所有样式都变成字符串，因此注意，对于每个icon的content，如 \e612 前要加个反斜杠进行转义。

import {createGlobalStyle} from'styled-components';

export const IconStyle = createGlobalStyle`
@font-face {
  font-family: "iconfont"; /* Project id 2842180 */
  src: url('./iconfont.eot?t=1632881263938'); /* IE9 */
  src: url('./iconfont.eot?t=1632881263938#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAL4AAsAAAAABqwAAAKpAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHFQGYACCcAqBKIEyATYCJAMICwYABCAFhGcHLxvtBRHVk1lkf0pOr9rU4adMhpEU9il1Ta84qsf0G5uiGsFlz8hYPVjZywRB+ce7h0+ykhUAbSYV3aVL0Qgl3IHPDS4IkkzmRYbNW88CHGbYgIvLZj0BAo4bQg+w3uZcmXIRaiRnnzz6QjIqXZon6T4fUhQDICXyzGEH7HYuZ27w+b93/BfQB77Hv1t70hoLH1geSB+wPSyLEu7koaegXutrADLiGQRgSbxcsri0rA7bse65CTxp7FEBWbUYGx7sxlyH0GiaNUdgiu7ViCOYgNwrB4ejz4tPlUBiorDrqrikjwfPWaBihHqV+froYxIwARQQDTSIuu5UBShEE6+wdGkCabdGwFuGETgRu7Yh1F9nV1oD4E3l96TwlLcqlABomAwpoHTUe0B5YL37Qk9dEbY+fTb7HxduuXTvVmhP14nVHwX2nt7v0m1yT2az9V/YerHHOee3nLuW6hL5W06FOdmDA1k5Szm+JK7PKXQK0OMWf9TJ/86DwovD3PyIwoSjb/2WWwrLSUstTl237ev96u2DxeQDgLE6o/qXv6Hif3Z3p540AK/zWxQw1mAeMD+ZS8CfM7SBRG2EQeomhc5JUqib0Vo6UTDYPkdvxpqd7jAnMMfpPj1meGVQmBNIaS4SJliRCFPMyYElUUoOW+FkChRCWwChthMI7J2HxJb7UNh7SGnuKUxw9Q6m2PsHSxoan2dFaIA7CBklj/aHq8uJXZNGYq80v4KRuviTpK40ikPbl7MXSiRTbKjveVRlZMkRz/IxCiFjkbyR03ZRLVPXcdNLWpcjHISMkkf7w9XlxAFZi993pfkVjIDUMyV1peJxaHuAuugTNHQnl9T3PKoyspBMxLOeRSFkLM2zNnLaLiMSZeocEqP6dn1j/LRjgCXYFtk4UxSCsRQAAAAAAA==') format('woff2'),
       url('./iconfont.woff?t=1632881263938') format('woff'),
       url('./iconfont.ttf?t=1632881263938') format('truetype'),
       url('./iconfont.svg?t=1632881263938#iconfont') format('svg');
}

.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-label::before {
  content: "\\e612";
}
`

再在App.js中引入该IconStyle，即可使用

import { IconStyle } from './assets/iconfont';