react項目如何使用iconfont的方法步驟
更新時間：2019年03月13日 10:37:11 作者：ineo6
這篇文章主要介紹了react項目如何使用iconfont的方法步驟，這里介紹下如何在項目中配置。小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
項目中通常會使用iconfont作為圖標顯示的解決方案，這里介紹下如何在項目中配置。
準備工作
首先配置好項目，關(guān)鍵需要注意FontClass/Symbol 前綴和Font Family兩個配置。
當我們配置好項目之后，就可以導(dǎo)出樣式文件，復(fù)制如下圖中的css鏈接中的內(nèi)容備用。
正餐開始
創(chuàng)建Icon.js文件。
import React from 'react';
import classNames from 'classnames';
import './iconfont.less';
// 上文中從iconfont中復(fù)制的css文件內(nèi)容
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;
創(chuàng)建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 />
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
React+Spring實現(xiàn)跨域問題的完美解決方法
這篇文章主要介紹了React+Spring實現(xiàn)跨域問題的完美解決方法,非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2018-08-08
在項目開發(fā)過程中,對于復(fù)雜的業(yè)務(wù)選擇功能很常見,下面這篇文章主要給大家介紹了關(guān)于React創(chuàng)建對話框組件的相關(guān)資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-05-05
這篇文章主要介紹了react通過組件拆分來實現(xiàn)購物車頁面的方法，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-08-08
關(guān)于antd tree和父子組件之間的傳值問題(react 總結(jié))
這篇文章主要介紹了關(guān)于antd tree 和父子組件之間的傳值問題，是小編給大家總結(jié)的一些react知識點，本文通過一個項目需求實例代碼詳解給大家介紹的非常詳細，需要的朋友可以參考下2021-06-06
這篇文章主要介紹了React18中的useDeferredValue的相關(guān)知識，本文通過實例代碼給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2022-03-03
React Native中WebView與html雙向通信遇到的坑
這篇文章主要介紹了React Native中WebView與html雙向通信的一些問題，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)吧2023-01-01
這篇文章主要為大家詳細介紹了如何通過React實現(xiàn)一個倒計時功能組件,文中的示例代碼講解詳細,具有一定的學(xué)習(xí)價值,感興趣的小伙伴可以了解下2023-09-09
這篇文章主要介紹了react+antd 遞歸實現(xiàn)樹狀目錄操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
React實現(xiàn)數(shù)字滾動組件numbers-scroll的示例詳解
數(shù)字滾動組件，也可以叫數(shù)字輪播組件，這個名字一聽就是非常普通常見的組件。本文將利用React實現(xiàn)這一組件，感興趣的小伙伴可以了解一下2023-03-03
這篇文章主要介紹了react配置antd按需加載的使用，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-02-02