成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專(zhuān)欄INFORMATION COLUMN

react項(xiàng)目如何使用iconfont

Donald / 1920人閱讀

摘要：項(xiàng)目中通常會(huì)使用作為圖標(biāo)顯示的解決方案，這里介紹下如何在項(xiàng)目中配置。準(zhǔn)備工作首先配置好項(xiàng)目，關(guān)鍵需要注意前綴和兩個(gè)配置。當(dāng)我們配置好項(xiàng)目之后，就可以導(dǎo)出樣式文件，復(fù)制如下圖中的鏈接中的內(nèi)容備用。正餐開(kāi)始創(chuàng)建文件。

項(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 (
    
  );
};

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;
}

然后這樣使用

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/117516.html

相關(guān)文章

  • react項(xiàng)目如何使用iconfont

    摘要：項(xiàng)目中通常會(huì)使用作為圖標(biāo)顯示的解決方案，這里介紹下如何在項(xiàng)目中配置。準(zhǔn)備工作首先配置好項(xiàng)目，關(guān)鍵需要注意前綴和兩個(gè)配置。當(dāng)我們配置好項(xiàng)目之后，就可以導(dǎo)出樣式文件，復(fù)制如下圖中的鏈接中的內(nèi)容備用。正餐開(kāi)始創(chuàng)建文件。 項(xiàng)目中通常會(huì)使用iconfont作為圖標(biāo)顯示的解決方案，這里介紹下如何在項(xiàng)目中配置。 準(zhǔn)備工作 首先配置好項(xiàng)目，關(guān)鍵需要注意FontClass/Symbol 前綴和Font ...

    1treeS 評(píng)論0 收藏0

  • 在react-native中添加高可維護(hù)的iconfont字體

    摘要：沒(méi)關(guān)系，筆者已經(jīng)為你們準(zhǔn)備好了，請(qǐng)保存到文件中，假設(shè)你的文件名叫和你剛才保存的字體文件在一起，方便管理復(fù)制字體這個(gè)插件包有好多套字體，我們可以需要把自己的也復(fù)制到包中對(duì)應(yīng)文件夾，當(dāng)然了，不可能手動(dòng)復(fù)制，筆者從來(lái)都是解放雙手的。 字體圖標(biāo)盛行的年代，在項(xiàng)目里使用一套不失真又可以隨意改變大小顏色的圖標(biāo)，是多么舒服的一件事。這里要推薦iconfont.cn，超多免費(fèi)圖標(biāo)，當(dāng)然了，你的專(zhuān)屬美工...

    CarterLi 評(píng)論0 收藏0

  • iconfont在react中完整使用教程

    摘要：查閱部分文件，找到相關(guān)資料，發(fā)現(xiàn)是在純頁(yè)面中導(dǎo)入是完全的。但是請(qǐng)注意，咱們將靜態(tài)資源放置在目錄下，中的不可采用。于是，正確做法如下在文件下的或者等文件中寫(xiě)入如下語(yǔ)句即可。第四步介紹使用方法待我研究去吧。。。 hello,各位小伙伴們，很久沒(méi)寫(xiě)文章了。突然要自己搭建項(xiàng)目了，項(xiàng)目中對(duì)于阿里巴巴iconfont的使用，大家都清楚嗎？ 第一步：將圖標(biāo)加入購(gòu)物車(chē) showImg(https://...

    mylxsw 評(píng)論0 收藏0

  • iconfont在react中完整使用教程

    摘要：查閱部分文件，找到相關(guān)資料，發(fā)現(xiàn)是在純頁(yè)面中導(dǎo)入是完全的。但是請(qǐng)注意，咱們將靜態(tài)資源放置在目錄下，中的不可采用。于是，正確做法如下在文件下的或者等文件中寫(xiě)入如下語(yǔ)句即可。第四步介紹使用方法待我研究去吧。。。 hello,各位小伙伴們，很久沒(méi)寫(xiě)文章了。突然要自己搭建項(xiàng)目了，項(xiàng)目中對(duì)于阿里巴巴iconfont的使用，大家都清楚嗎？ 第一步：將圖標(biāo)加入購(gòu)物車(chē) showImg(https://...

    Prasanta 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<