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

  • 2020 年 4 月 13 日
  • 筆記

為什麼不切圖標了

以前的圖標我們非常喜歡用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項目中試試阿里圖標

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

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

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

  1. 現在可以開始著手封裝

如果你看過我之前關於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設計師，它會不定時將自己設計的圖標上傳到這個項目裡面，並通知開發者手動下載更新本地的靜態資源文件。

VirMach 便宜 VPS

QNews

QNews