大人時代變了，如今圖標不搞切圖

爲何不切圖標了

之前的圖標咱們很是喜歡用ps等工具切成一張張xxx.png圖片，若是稍微懂點移動端適配，對dpr(設備像素比)有所瞭解的，還會切出相似home@1x.ppng,home@2x.png,home@3x.png這樣的圖標，其中@1x表示用來適配dpr爲1的手機，圖像分辨率最低；@2x表示用來適配dpr爲2的手機，圖像分辨率稍高一些；@3x用來適配dpr爲3的手機，圖像分辨率最高。

最後，藉助媒體查詢如@media(min-device-pixel-ratio: 2){ }這樣的代碼對不一樣dpr的手機寫上對應分辨率的圖片，在大型項目中，本地靜態圖片可能相似這樣：

這是很是混亂且難以管理的。

並且，png格式也好，jpg格式也罷，做爲位圖，它們都有兩個自然的缺陷：一是圖片資源體積小與清晰度高這二者不可兼得；二是不管清晰度再怎麼高，放大後依然不清晰。

咱們能夠簡單感性地理解一下：位圖是由不少個像素點構成的，理論上，位圖的像素和屏幕上的物理像素一一對應，就能夠達到最佳的顯示效果。然而如今dpr>1的屏幕比比皆是，在這種場景下，位圖的一個像素會由多個物理像素來渲染。在網頁縮放時是更是如此，縮放厲害時一個位圖像素可能橫跨幾百個物理像素。

這會帶來兩個問題：一是多個物理像素對應一個位圖像素會顯得很大，也就是所謂的「鋸齒感」，二是這些物理像素並不能準確獲取對應位圖像素的顏色，不少取近似值的狀況，致使顏色很雜。

咱們從iconfont中找一個圖標文件，下載其對應的png圖片，經過放大來看看效果：

能夠看到放大後，一是有很多「大方塊」，二是出現了一些「近似色」。

爲何矢量圖會更清晰？由於矢量圖，好比svg，是一種對圖像的形狀描述，好比描述曲線、形狀、顏色等，本質上屬於文本文件，不只體積小，放大後質量也不會降低。

怎麼專挑圖標下手

對矢量圖來講，繪製的路徑過於複雜，顏色過於豐富，也會致使繪製性能降低，這是矢量圖的缺點，因此咱們不可能拿矢量圖去繪製一張廣告背景圖，可是圖標卻很合適，由於圖標每每沒有複雜的顏色信息，也沒有像風景人像圖那樣複雜的線條。

在vue項目中試試阿里圖標

1. 打開阿里圖標官網 https://www.iconfont.cn/
2. 登陸
3. 新建一個項目
4. 找幾個圖標，添加至項目
5. 選擇「Font class」方式引入，並下載項目到本地

選擇Font class的緣由一是語義化，二是經過類名來定義具體圖標很是方便封裝

6. 將解壓出來的文件夾重命名後放到項目的src/assets目錄下(放在這裏是由於assets目錄在初始化的時候就被認爲是一個用於存放靜態資源的目錄)

7. 如今能夠開始着手封裝

若是你看過我以前關於echart封裝那篇文章，就會發現我很是不推薦將封裝的公共組件的單文件直接寫在components根目錄下，這是一個很是差的習慣。強烈建議再建一級目錄，同時爲你的公共組件寫上README和使用示例，以及入參說明，這會極大的方便後續使用者的調用

封裝以前的思考

在封裝以前，咱們須要考慮如下幾點：

• 能夠經過type或者name入參來標識具體是哪一個圖標
• 要提供最經常使用的樣式入參，一個是圖標顏色color，另一個是圖標大小size
• 能響應事件
• 使用者能定製一些特殊樣式如旋轉角度rotation，縮放倍數scale等
• 若是在業務上有須要，作的更好一點，還能夠提供dot和badge功能，也就是圖標右上角的小紅點和數量

能作到前四點，就已經完成了一個基礎版圖標組件的封裝；若是能加上第五點，給這手封裝打個90分，我認爲沒有問題。

封裝的源碼及說明

下面這個是沒有dot和badge的，也就是一個青春版的圖標組件封裝，若是點贊超過10個，我會更新這篇文章，封裝一個帶小紅點功能和圖標右上角顯示消息數量的組件，也就是尊享版的

<template>
  <!-- 有兩個注意點：一是iconfont這個類名必須添加，二是經過$listeners將父做用域中的事件監聽器導入進來，這樣就能夠正常相應點擊事件 -->
  <i
    :class="name"
    class="iconfont"
    :style="{ fontSize: `${size}px`, color }"
    v-on="$listeners"
  ></i>
</template>

<script>
export default {
  name: "Icon",
  props: {
    // 圖標名稱
    name: {
      type: String,
      default: ""
    },
    // 圖標顏色
    color: {
      type: String,
      default: ""
    },
    // 圖標大小
    size: {
      type: [String, Number],
      default: 20
    }
  }
};
</script>

<style lang="less" scoped>
// 這裏加～是由於當你在一個資源路徑最前面加了～時，webpack會把這個路徑對應的文件視爲一個module（模塊）去解析
// 這樣@對應的alias，也就是項目的src目錄纔會被正確識別，這步解析是webpack作的，和網上不少文章說的css-loader沒有一毛錢關係
// 還有一種寫法是@import url()，兩種寫法均可以，沒有對錯之分
@import "~@/assets/iconfont/iconfont.css";

.iconfont {
  cursor: pointer;
}
</style>

在這裏，須要特別說明如下爲何類名必定要默認添加一個「iconfont」，簡單來講，由於只有.iconfont這個類名繼承了特殊名爲"iconfont"的字體家族。咱們能夠在iconfont.css源碼中驗證這一點：

@font-face {font-family: "iconfont";
  src: url('iconfont.eot?t=1586688927486'); /* IE9 */
  src: url('iconfont.eot?t=1586688927486#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAQcAAsAAAAACEAAAAPQAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDBgqEKINlATYCJAMMCwgABCAFhG0HNxssB1GULUqM7CMhN9F6CVFamUwxYBhOWrS38fC13+/c3f3vmwFJkniD7NNJopFEKiRIlWE6pTNdNNQ30OZCMTk7sLo2ozc2cY1cNN61VXFVvwrYriJ84t7pH3Ue2HyW5TLH1k9dgHFAge153gUScIEE5IE0jF3QEm8T6FjkSOo4OjETUFCYiwJxj7JLAIWMXWnghJapqthZxJOGVnpIFwAeg8/HD/dQIGlk5sqTuygmEPqu+bwfJGrCtUdQTOcF20fGFkAhbiv958AovwXUUfUyzbWVIqSpUv//E8g1Y7XRH14iKqa+B9lrunRRCkdE8NEvgwbXv48KLTzjH5pnhlZVmzvcdbUh86U2U5TeLKlFkZYjUzpEj9bZQa1WkmZNinXbhgOm5nRbjlkfkdDbxCFdkuxjlDZJardOG3ZPEpTf5ETbCtBJ0aMoiW77kSNdR5erHjXaqa/fKqG1Dzt3i2kkyaiiZbZAVTptuvQzYimJhE5RWSSZKeuMI6igVq1Mers2tQYeEYtp2VVtle3VrUQLpBx1F1dNVU5XTxITRRX8T2aM0Fvq5X9E7+TCYeaU085ToeelpK/+4y66VYlyn3qu3I0iCrnmW1sa86Wk1730UD7CKzIH481E6Dd3vfPqEWHsON1uBNh1gzoob5zk/+0ccdtw/qh+lu+6ffZVFkG28Z/Xbi6eOTvOGBgSKguzqszqHgsLnp5WPaWafAeojbJTTa8UuMnKZ3Y4ul92teL6ywx/urUKWhLPKjOc3H5zVeb2MHjrtGdg464F04Gubz+/kIJhSaaZJRIswfuGwdYt6NjkqOZRjWOKjopRHeSgpbneCgU1HDXgGk2gGIB6KF/KoUHxbp7LFv/6O+ZfKn8WqQZ+bXULeDus1Q9j9VABuju13kQg+LOKjj1FU5mOXBS5IzcS2Y2/l0voaG41DE/cG26c7dxMaJlNkDQtIGtZIgt7Cw1dO6i07KFjU8z+rikMKEobG3YDhJF5JAOvyEYukoV9Fw1z3qIyChAdp6F5YtdKoFAEhpTgCBMu3QijDAGfZbtwKGxNR9hruSVYWhVwaQhWgaZgN2fXfCkG4SPYFGsq1rHdcZwFszABD44G9yFcrgAWYoJyhIE7l+G40N/FhVX1JGeGgAdAjmAQJXAIJlipjWAoBgE+ljcYBxXenw7BthZXCayBURWnQWAqoKPD3Dhz7UDG6PmdGLcyvsI6bO5wOBaex4IR4IFFQy+Ca+UFYMLqaeUQDDhnZQOyQv5cUD9WV73z8kbe+x2CDvPCHClyFHlbJJJ3Wo+gG1A+AAA=') format('woff2'),
  url('iconfont.woff?t=1586688927486') format('woff'),
  url('iconfont.ttf?t=1586688927486') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
  url('iconfont.svg?t=1586688927486#iconfont') format('svg'); /* iOS 4.1- */
}

.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-qq:before {
  content: "\e613";
}

.icon-weixin:before {
  content: "\e79f";
}

將icon.vue註冊到全局

咱們在使用iconfont的時候，不可能每一個使用到的組件都來手動引入一遍icon.vue，由於圖標組件算是應用很是廣的一個基礎公共組件，咱們能夠把它註冊到全局，方便使用，在項目的main.js裏面引入並註冊它，註冊全局組件的指令是Vue.component，它接收兩個參數，第一個是組件名稱，第二個是組件自己。main.js代碼以下：

import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import Icon from "./components/icon/icon.vue";

Vue.config.productionTip = false;

Vue.component(Icon.name, Icon);

new Vue({
  router,
  render: h => h(App)
}).$mount("#app");

使用效果

在任意地方使用以下：

<template>
  <icon name="icon-weixin" size="40" @click="iconClickHandler" />
</template>

<script>
export default {
  methods: {
    iconClickHandler() {
      console.log("點擊了圖標");
    }
  }
};
</script>

打開瀏覽器能夠看到已經成功顯示，點擊圖標控制檯也有打印

爲你的公共組件添加說明文檔

在書寫公共組件時，說明文檔是很是重要的，要讓別人一看就懂，實際工做中沒有多少人會有興趣去經過閱讀你的源碼來看看怎麼使用，這樣效率過低了,書寫README文檔以下：

實際項目怎麼跟UI配合

在實際項目中，通常來講一個iconfont項目的管理員就是UI設計師，它會不定時將本身設計的圖標上傳到這個項目裏面，並通知開發者手動下載更新本地的靜態資源文件。