大人時代變了，現在圖示不搞切圖
為什麼不切圖示了
以前的圖示我們非常喜歡用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>
開啟瀏覽器可以看到已經成功顯示，點選圖示控制檯也有列印
為你的公共元件新增說明文件
在書寫公共元件時，說明文件是非常重要的，要讓別人一看就懂，實際工作中沒有多少人會有興趣去通過閱讀你的原始碼來看看怎麼使用，這樣效率太低了,書寫README文件如下：
實際專案怎麼跟UI配合
在實際專案中，一般來說一個iconfont專案的管理員就是UI設計師，它會不定時將自己設計的圖示上傳到這個專案裡面，並通知開發者手動下載更新本地的靜態資源文