大人時代變了，現在圖標不搞切圖

為什麼不切圖標了以前的圖標我們非常喜歡用ps等工具切成一張張xxx.png圖片，如果稍微懂點移動端適配，對dpr(設備像素比)有所瞭解的，還會切出類似[email protected],[email protected],[email protected]這樣的圖標，其中@1x表示用來適配dpr為1的手機，圖像解析度最低；@2x表 ...

為什麼不切圖標了

以前的圖標我們非常喜歡用ps等工具切成一張張xxx.png圖片，如果稍微懂點移動端適配，對dpr(設備像素比)有所瞭解的，還會切出類似[email protected],[email protected],[email protected]這樣的圖標，其中@1x表示用來適配dpr為1的手機，圖像解析度最低；@2x表示用來適配dpr為2的手機，圖像解析度稍高一些；@3x用來適配dpr為3的手機，圖像解析度最高。

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

這是非常混亂且難以管理的。

而且，png格式也好，jpg格式也罷，作為點陣圖，它們都有兩個天然的缺陷：一是圖片資源體積小與清晰度高這兩者不可兼得；二是無論清晰度再怎麼高，放大後依然不清晰。

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

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

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

可以看到放大後，一是有不少“大方塊”，二是出現了一些“近似色”。

為什麼矢量圖會更清晰？因為矢量圖，比如svg，是一種對圖像的形狀描述，比如描述曲線、形狀、顏色等，本質上屬於文本文件，不僅體積小，放大後質量也不會下降。

怎麼專挑圖標下手

對矢量圖來說，繪製的路徑過於複雜，顏色過於豐富，也會導致繪製性能下降，這是矢量圖的缺點，所以我們不可能拿矢量圖去繪製一張廣告背景圖，但是圖標卻很合適，因為圖標往往沒有複雜的顏色信息，也沒有像風景人像圖那樣複雜的線條。

在vue項目中試試阿裡圖標

打開阿裡圖標官網 https://www.iconfont.cn/
登錄
新建一個項目
找幾個圖標，添加至項目
選擇“Font class”方式引入，並下載項目到本地

選擇Font class的原因一是語義化，二是通過類名來定義具體圖標非常方便封裝

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

現在可以開始著手封裝

如果你看過我之前關於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>