react-webpack工程中怎么使用iconfont圖標

iOS122 發布于2019-08-21 17:36 / 3099人閱讀

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

2018-9-17更新：現在如果使用新版本antd作為UI框架的話 icon圖標已經和iconfont打通隨意使用了

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

2、進入到iconfont官網這個頁面左側選擇中間那個之后點擊下載到本地

3、下載后解壓縮到項目工程某一個你覺得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...

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/89733.html

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

摘要：歡迎大家收看聊一聊系列，這一套系列文章，可以幫助前端工程師們了解前端的方方面面不僅僅是代碼從說起要想了解，得從一個新的規則說起。因為用戶沒有安裝的話，我們強制要求顯示也沒有辦法。國內有阿里巴巴的平臺，可以選自己喜歡的圖標導出。歡迎大家收看聊一聊系列，這一套系列文章，可以幫助前端工程師們了解前端的方方面面（不僅僅是代碼）：https://segmentfault.com/blog/fr...

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

摘要：歡迎大家收看聊一聊系列，這一套系列文章，可以幫助前端工程師們了解前端的方方面面不僅僅是代碼從說起要想了解，得從一個新的規則說起。因為用戶沒有安裝的話，我們強制要求顯示也沒有辦法。國內有阿里巴巴的平臺，可以選自己喜歡的圖標導出。歡迎大家收看聊一聊系列，這一套系列文章，可以幫助前端工程師們了解前端的方方面面（不僅僅是代碼）：https://segmentfault.com/blog/fr...

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

摘要：歡迎大家收看聊一聊系列，這一套系列文章，可以幫助前端工程師們了解前端的方方面面不僅僅是代碼從說起要想了解，得從一個新的規則說起。因為用戶沒有安裝的話，我們強制要求顯示也沒有辦法。國內有阿里巴巴的平臺，可以選自己喜歡的圖標導出。歡迎大家收看聊一聊系列，這一套系列文章，可以幫助前端工程師們了解前端的方方面面（不僅僅是代碼）：https://segmentfault.com/blog/fr...

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

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

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