reactjs项⽬使⽤iconfont⼩图标以及使⽤带颜⾊inconfont⼩图标
在 reactjs 项⽬中是所有⼩图标⽬前主要分为两类使⽤⽅式，第⼀类通过 CSS 引⼊的⽅式使⽤，第⼆类使⽤ JS 的⽅式引⼊使⽤。
1. 注册-登录-建⽴项⽬-选中图标添加到购物车-添加⾄项⽬-下载到本地，当然亦能上传制作的⾃定义⼩图标。下⾯正式代码部分。
下载到本地解压后有如下⼏个⽂件：
其中第⼀种 CSS 引⼊使⽤的⽅案需要使⽤的⽂件如下图红线标记：
在如上图中到 iconfont.css 打开后更改路径(⼀般如图中所⽰)在红线标记的位置:
修改完成后保存，⼀般会项⽬⼊⼝的 CSS ⽂件中引⼊这个 CSS ⽂件，依照⾃⼰的⽂件路径(例⼦⾥放在 static ⽬录下，注意末尾有分号)：
@import './static/iconfont/iconfont.css';
之后则在页⾯中直接书写：
<span class="iconfont">3</span>
第⼆种⽅式本质也是 CSS 的，不过其概念不同，需要安装第三⽅插件 styled-components
前三步都相同，
第四步则把 iconfont.css 改成 iconfont.js
第五步在改名后的 iconfont.js ⽂件顶部引⼊ styled-components 导出变量具体的代码如下：
import { createGlobalStyle } from 'styled-components'
export const Icon = createGlobalStyle `@font-face {font-family: "iconfont";
src: url('./?t=1561821154036'); /* IE9 */
src: url('./?t=1561821154036#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAQQAAsAAAAACGgAAAPDAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDMgqEBINWATYCJAMUCwwABCAFhG0HShtkBxEVnOvIfhS4sTOsrGf+U2g2U  url('./iconfont.woff?t=1561821154036') format('woff'),
url('./f?t=1561821154036') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
url('./iconfont.svg?t=1561821154036#iconfont') format('svg'); /* iOS 4.1- */
}
.iconfont {
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
icon图标库-moz-osx-font-smoothing: grayscale;
}
`
最后则在⼊⼝ js 中引⼊改名的 iconfont.js (注意⽂件路径)。
第⼆种⽅案不明⽩的地⽅可以参考我
使⽤带颜⾊的 iconfont ⼩图标
第⼀步引⼊ symbol
把图中代码放⼊ public ⽂件中 index.html 添加⼀条(器中 src 的链接按照你第⼀步到的链接替换)
<script type="text/javascript" src = "at.alicdn/t/font_1288963_qzgtmt0siv.js"></script>
第⼆步在 index.css 引⼊如下 css
.icon {
width: 1em; height: 1em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
第三步书写( icon-xxx 替换成你需要使⽤的 icon 名字)
<svg className="icon" aria-hidden="true">
<use xlinkHref="#icon-xxx"></use>
</svg>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。