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