隨著Vue的誕生，它似乎就被人寄予厚望，不僅僅是因為其輕量級的MVVM設計方式，而且其實現了組件化開發模式，所以越來越多的人會拿Vue和AngularJS、React Native做比較。具體關于它們的比較，我不做過多描述，使用哪個應該根據使用場景出發。

Vue.js

最近，因為有業務需要使用Vue去開發，所以我們需要自己封裝出Vue.js的各種常用組件。今天就給大家介紹一下我封裝Vue的icon組件的過程。當然這篇文章不是Vue.js，Webpack類的基礎教學課程，而是在大家有些基礎的情況下去看的。所以文章中只介紹了部分重點的代碼，以及代碼的截圖，如果有不大能看懂的地方可以先學下Vue和webpack的基礎。如果真的有需要可以在評論處評論，我可以出些Vue，Gulp，Webpack等基礎文章。

icon組件外觀

首先我們看一下icon組件運行出來后的模樣

icon組件

icon組件實現過程

• 項目搭建
  

icon組件實現后是一個可以直接使用的npm包，使用的是Yeoman構建工具，配和Gulp+Webpack，生成的工作目錄結構如下

目錄結構

（1）config文件夾下是webpack的配置文件

（2）src下是Vue組件的源文件

（3）example文件夾下是示例，剛看到的截圖就是example文件夾下的文件運行后的樣子

• icon源文件編寫

項目結構生成好后，編寫icon組件的源文件就是最重要的了。

icon組件是一個.vue文件，其中包含template，style和script。

我實現的icon組件樣式是借助于ionicons，所以要借助于ionicons的樣式文件，因此會有以下的代碼

引入ionicons的樣式

然后考慮icon組件應該具備的幾項屬性，一個是樣式，利用type變量去控制；一個是顏色，利用color變量去控制；一個是大小，利用size變量去控制。所以template中有以下代碼

template代碼

在script中有以下代碼

script代碼

同時預先定義好icon組件大中小的幾個樣式，因此在style中會有以下代碼

style代碼

至此icon組件的源碼編寫就結束了，但并不是整個工程就結束了，需要對webpack進行設置，而這也是最重要的部分。

因為我們在icon組件的源碼中引入了ionicons的樣式，所以需要在webpack的配置文件中加入對css文件的解析loader，而css文件中又會引入woff，svg等文件，因此又要加入對這些文件的解析loader，如果不加入的對css，tff，svg等文件解析的話會報錯。

在webpack.base.js文件中加入以下代碼

webpack的配置

• 樣例的訪問

在源文件和webpack配置好后，就可以通過在example文件夾下寫demo了。

在demo.vue文件中，使用<icon>標簽即可訪問到自定義的icon組件

icon組件的例子

通過type，size，color三個參數來定義我們需要的icon組件的樣式，運行出來后的例子就如一開始運行出來的一樣，是不是很好看呢？

總結

Vue的組件還有很多，例如form表單類的，View視圖類，Navigation導航類等，都需要一個個去編寫，不過只要我們搞懂Vue的運行模式和Webpack的編譯模式就可以很方便的寫出來了。

如果喜歡的話，記得關注小編噢，小編后續會堅持出更多技術性的文章，如果有任何問題，也歡迎提問，小編都會盡力解答的。

容導讀

特點： 兼容性良好，支持ie8+，及所有現代瀏覽器。相比于unicode語意明確，書寫更直觀。不過因為本質上還是使用的字體，所以多色圖標還是不支持的。這是一種全新的使用方式，應該說這才是未來的主流，也是平臺目前推薦的用法。支持多色圖標了，不再受單色限制。通過一些技巧，支持像字體那樣，通過 font-size , color 來調整樣式。

首先因為elementUI提供的icon太少了，所有自己找找有沒有矢量圖可以補充的，嘗試多種方法，覺得下面方法簡單易懂，分享給大家

推薦使用阿里爸爸矢量圖標管理，??

image.png

例

將圖像元素設置為圖標化的等價物：

img

{

content:icon;

icon:url(imgicon.png);

}

瀏覽器支持

沒有主流瀏覽器支持icon屬性。

屬性定義及使用說明

icon 屬性為創作者提供了將元素設置為圖標等價物的能力。

注意：元素的圖標是不可使用，除非"content"屬性設置為"icon"！

語法

icon: auto|URL|inherit;

如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！