溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
小編給大家分享一下react項目中iconfont的使用案例，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！
項目中通常會使用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 />看完了這篇文章，相信你對“react項目中iconfont的使用案例”有了一定的了解，如果想了解更多相關知識，歡迎關注億速云行業資訊頻道，感謝各位的閱讀！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
