react項(xiàng)目如何使用iconfont的方法步驟
更新時(shí)間：2019年03月13日 10:37:11 作者：ineo6
這篇文章主要介紹了react項(xiàng)目如何使用iconfont的方法步驟，這里介紹下如何在項(xiàng)目中配置。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
項(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)容備用。
正餐開(kā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 />
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
詳解react-router如何實(shí)現(xiàn)按需加載
本篇文章主要介紹了react-router如何實(shí)現(xiàn)按需加載，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-06-06
如何將你的AngularJS1.x應(yīng)用遷移至React的方法
本篇文章主要介紹了如何將你的AngularJS1.x應(yīng)用遷移至React的方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-02-02
在 React 項(xiàng)目中使用 Auth0 并集成到后端服務(wù)的配置步驟詳解
這篇文章主要介紹了在 React 項(xiàng)目中使用 Auth0 并集成到后端服務(wù)的配置步驟詳解,通過(guò)本文詳細(xì)步驟,您可以將 Auth0 集成到 React 項(xiàng)目并與后端服務(wù)交互,需要的朋友可以參考下2024-07-07
React?正確使用useCallback?useMemo的方式
這篇文章主要介紹了React?正確使用useCallback?useMemo的方式，文章圍繞主題展開(kāi)詳細(xì)的內(nèi)容介紹，具有一定的參考價(jià)值，需要的朋友可以參考一下2022-08-08
React+valtio響應(yīng)式狀態(tài)管理
Valtio是一個(gè)很輕量級(jí)的響應(yīng)式狀態(tài)管理庫(kù),使用外部狀態(tài)代理去驅(qū)動(dòng)React視圖來(lái)更新,本文主要介紹了React+valtio響應(yīng)式狀態(tài)管理,感興趣的可以了解一下2023-12-12
react的ui庫(kù)antd中form表單使用SelectTree反顯問(wèn)題及解決
這篇文章主要介紹了react的ui庫(kù)antd中form表單使用SelectTree反顯問(wèn)題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-01-01
React?UI組件庫(kù)之快速實(shí)現(xiàn)antd的按需引入和自定義主題
react入門學(xué)習(xí)告一段路,下面這篇文章主要給大家介紹了關(guān)于React?UI組件庫(kù)之快速實(shí)現(xiàn)antd的按需引入和自定義主題的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-07-07
React創(chuàng)建組件的三種方式及其區(qū)別
本文主要介紹了React創(chuàng)建組件的三種方式及其區(qū)別，具有一定的參考價(jià)值，下面跟著小編一起來(lái)看下吧2017-01-01
這篇文章主要為大家介紹了React?redux?原理及使用詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-11-11
React組件實(shí)例三大核心屬性State props Refs詳解
組件實(shí)例的三大核心屬性是：State、Props、Refs。類組件中這三大屬性都存在。函數(shù)式組件中訪問(wèn)不到 this，也就不存在組件實(shí)例這種說(shuō)法，但由于它的特殊性（函數(shù)可以接收參數(shù)），所以存在Props這種屬性2022-12-12