react-webpack工程中怎么使用iconfont圖標(biāo)

iOS122 發(fā)布于2019-08-21 17:36 / 3105人閱讀

摘要：更新現(xiàn)在如果使用新版本作為框架的話圖標(biāo)已經(jīng)和打通隨意使用了打包那里要添加如下代碼這個(gè)是告訴要打包什么類型的文件進(jìn)入到官網(wǎng)這個(gè)頁面左側(cè)選擇中間那個(gè)之后點(diǎn)擊下載到本地下載后解壓縮到項(xiàng)目工程某一個(gè)你覺得的目錄下不用拷貝再你想引用的組件中引用他

2018-9-17更新：現(xiàn)在如果使用新版本antd作為UI框架的話 icon圖標(biāo)已經(jīng)和iconfont打通隨意使用了

1、webpack打包那里要添加如下代碼：（這個(gè)是告訴webpack要打包什么類型的文件）

2、進(jìn)入到iconfont官網(wǎng)這個(gè)頁面左側(cè)選擇中間那個(gè) 之后點(diǎn)擊下載到本地

3、下載后解壓縮到項(xiàng)目工程某一個(gè)你覺得ok的目錄下（demo不用拷貝）

4、再你想引用的react組件中引用他，只需要引用iconfont.css文件

require("../../../public/css/icon-extend/iconfont.css");

5、正常使用就ok了

主要參考文章：

https://www.cnblogs.com/Nick-...

http://react-china.org/t/reac...

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

轉(zhuǎn)載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/89733.html

相關(guān)文章

[聊一聊系列]聊一聊iconfont那些事兒

摘要：歡迎大家收看聊一聊系列，這一套系列文章，可以幫助前端工程師們了解前端的方方面面不僅僅是代碼從說起要想了解，得從一個(gè)新的規(guī)則說起。因?yàn)橛脩魶]有安裝的話，我們強(qiáng)制要求顯示也沒有辦法。國內(nèi)有阿里巴巴的平臺，可以選自己喜歡的圖標(biāo)導(dǎo)出。歡迎大家收看聊一聊系列，這一套系列文章，可以幫助前端工程師們了解前端的方方面面（不僅僅是代碼）：https://segmentfault.com/blog/fr...

Markxu 2019-08-29 10:57 評論0 收藏0
[聊一聊系列]聊一聊iconfont那些事兒

摘要：歡迎大家收看聊一聊系列，這一套系列文章，可以幫助前端工程師們了解前端的方方面面不僅僅是代碼從說起要想了解，得從一個(gè)新的規(guī)則說起。因?yàn)橛脩魶]有安裝的話，我們強(qiáng)制要求顯示也沒有辦法。國內(nèi)有阿里巴巴的平臺，可以選自己喜歡的圖標(biāo)導(dǎo)出。歡迎大家收看聊一聊系列，這一套系列文章，可以幫助前端工程師們了解前端的方方面面（不僅僅是代碼）：https://segmentfault.com/blog/fr...

2501207950 2019-08-19 18:44 評論0 收藏0
[聊一聊系列]聊一聊iconfont那些事兒

摘要：歡迎大家收看聊一聊系列，這一套系列文章，可以幫助前端工程師們了解前端的方方面面不僅僅是代碼從說起要想了解，得從一個(gè)新的規(guī)則說起。因?yàn)橛脩魶]有安裝的話，我們強(qiáng)制要求顯示也沒有辦法。國內(nèi)有阿里巴巴的平臺，可以選自己喜歡的圖標(biāo)導(dǎo)出。歡迎大家收看聊一聊系列，這一套系列文章，可以幫助前端工程師們了解前端的方方面面（不僅僅是代碼）：https://segmentfault.com/blog/fr...

Shisui 2019-08-01 15:26 評論0 收藏0
我的前端規(guī)范系列-圖標(biāo)工程化[好用的圖標(biāo)]

摘要：能快速修改和得到想要的圖標(biāo)圖標(biāo)命名規(guī)范化后編程人員可以很快配合找到想要的圖標(biāo)。圖標(biāo)設(shè)計(jì)規(guī)范圖標(biāo)要有重心根據(jù)不同的圖標(biāo)形狀類型使用不同的輪廓線，可以使圖標(biāo)之間保持一致的視覺效果。為什么要有圖標(biāo)規(guī)范 1.文字和圖標(biāo)能更好的搭配使用圖標(biāo)是具有指代意義的圖形，也是一種標(biāo)識，即文字的一種延展，實(shí)際應(yīng)用中也常與文字一起配合使用,按字體標(biāo)準(zhǔn)規(guī)范化設(shè)計(jì)的圖標(biāo)更容易對齊。2.圖標(biāo)適配變得更簡單，圖標(biāo)風(fēng)...

shengguo 2019-08-02 16:10 評論0 收藏0