項目中通常會使用iconfont作為圖標顯示的解決方案，這里介紹下如何在項目中配置。
準備工作
首先配置好項目，關鍵需要注意FontClass/Symbol 前綴和Font Family兩個配置。
當我們配置好項目之后，就可以導出樣式文件，復制如下圖中的css鏈接中的內容備用。
正餐開始
創建Icon.js文件。
import React from 'react';import classNames from 'classnames';import './iconfont.less';// 上文中從iconfont中復制的css文件內容import './icon.css';const Icons = (props) => { const {type, spin, className = '', ...others} = props; const cls = classNames({ 'unovo-iconfont': true, [`unovo-iconfont-${type}`]: true, 'unovo-iconfont-spin': !!spin, }, className); return ( <i className={cls} {...others}/> );};export default Icons; 創建iconfont.less。
@keyframes icon-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); }}@iconfont-css-prefix: unovo-iconfont;.@{iconfont-css-prefix}-spin:before { display: inline-block; animation: icon-spin infinite 1s linear;}然后這樣使用
<Icons type={type} spin />以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持VeVb武林網。
新聞熱點
疑難解答
