網頁圖示的優雅使用與總結

huangjincq發表於2018-01-30
網頁

專案中，總會有一些大大小小的圖示，顯得頁面好看、不再那麼枯燥。我們是如何在專案中使用設計師設計好的圖示呢。

前期

在最開始，專案中使用圖示就是直接設計師切下來的.png圖示。後來發現頁面中圖圖示的引用數目太多佔據了大部分的請求資源，所以有了 CSS Sprite 將多張小圖合併到一個圖片上，然後利用CSS背景圖片定位，來展示不同的圖示。

優點

  • 減少了網路請求

缺點

  • 使用不便捷。使用不同圖示時經常需要，去量其位置，進行css背景定位
  • 難以維護。每新增一個圖示，都需要改動原始圖片，可能影響之前的圖片，長期維護的專案可能變得混亂。圖片改動還會破環瀏覽器對圖示的快取。
  • 響應式不相容。這裡指的是設計師往往需要根據不同的裝置尺寸來準備響應大小的圖示@2X，@3x等等。使得程式碼更為複雜。

font字型圖示

後來在一些對圖示要求不高的（後臺管理系統等）頁面，我們都是使用Font Awesome 這種字型圖示庫，找到類似的圖示寫入class樣式就可以使用了，非常方便。他涵蓋了大部分的常用圖示。

優點

  • 使用方便，無需切圖

缺點

  • 不可定製化。你只能用他已經存在的圖示。
  • 找個圖示找一年。使用還是有點費事，有時候找不到合適的圖示

iconfont 時代

阿里出的一個開源圖示庫，我相信現在很大部分都在使用，圖示庫的內容豐富就不用我來介紹了，基本能找到你想用的所有圖示，即使沒有，設計師也可以上傳自己圖示。

當前專案已擁有的圖示，以及類名，一目瞭然，維護和使用一目瞭然。

本文的重點就是介紹，如何在自己專案中使用 iconfont

建立專案圖示庫

我們登入iconfont後建立一個專案。然後新增一些圖示到你的專案內。如圖：

網頁圖示的優雅使用與總結

官方提供了三種使用方案，具體詳情可以檢視使用幫助。在這我主要是說明三種方案的優點劣。

unicode引用

unicode是字型在網頁端最原始的應用方式

unicode 使用的本質就是引入一個字型庫。寫類似 <i class="iconfont">&#x33;</i> 裡面 &#x33; 這樣的編號就會生成一個圖示。

使用方法

由於這種使用方法基本會被font-class代替就不做詳細介紹了，詳情請看官方文件。

優點

  • 相容性最好，支援ie6+，及所有現代瀏覽器。
  • 支援按字型的方式去動態調整圖示大小，顏色等等。

缺點

  • 但是因為是字型，所以不支援多色。只能使用平臺裡單色的圖示，就算專案裡有多色圖示也會自動去色。
  • 取名很亂，都不知道這個符號對應的具體圖示形勢
  • 沒有提供cdn服務，每次新圖示都要下載後手動新增

font-class引用

font-class是unicode使用方式的一種變種，主要是解決unicode書寫不直觀，語意不明確的問題。

使用方法

第一步：拷貝專案下面生成的fontclass程式碼：

../font_8d5l8fzk5b87iudi.css
複製程式碼

第二步：挑選相應圖示並獲取類名，應用於頁面：

<i class="iconfont icon-xxx"></i>
複製程式碼

優點

  • 相容性良好，支援ie8+，及所有現代瀏覽器。
  • 相比於unicode語意明確，書寫更直觀。可以很容易分辨這個icon是什麼。
  • 因為使用class來定義圖示，所以當要替換圖示時，只需要修改class裡面的unicode引用。
  • 提供了cdn服務，增加圖示只需要修改cdn連結即可，不用下載。使用方便。
//at.alicdn.com/t/font_8d5l8fzk5b87iudi.css
複製程式碼

將這段程式碼加入 <header> 的 <link> 中

缺點

  • 本質上還是使用的字型，所以多色圖示還是不支援的。

symbol引用

這是一種全新的使用方式，應該說這才是未來的主流，也是平臺目前推薦的用法。這種用法其實是做了一個svg的集合。

使用步驟如下： 第一步：拷貝專案下面生成的symbol程式碼：

./iconfont.js
複製程式碼

第二步：加入通用css程式碼（引入一次就行）：

<style type="text/css">
    .icon {
       width: 1em; height: 1em;
       vertical-align: -0.15em;
       fill: currentColor;
       overflow: hidden;
    }
</style>
複製程式碼

第三步：挑選相應圖示並獲取類名，應用於頁面：

<svg class="icon" aria-hidden="true">
    <use xlink:href="#icon-xxx"></use>
</svg>
複製程式碼

優點

  • svg向量圖，任意縮放不失真。
  • 支援多色圖示了，不再受單色限制。
  • 通過一些技巧，支援像字型那樣，通過font-size,color來調整樣式。
  • 同樣提供了cdn服務，增加圖示只需要修改cdn連結即可，不用下載。使用方便。
//at.alicdn.com/t/font_8d5l8fzk5b87iudi.js
複製程式碼

將這段程式碼加入 <header> 的 <link> 中

缺點

  • 相容性較差，支援 ie9+,及現代瀏覽器。
  • 瀏覽器渲染svg的效能一般，還不如png。

綜上所述，其實 symbol引用 的缺點在移動端，或者相容性不苛刻的平臺上算不上什麼缺點，官方推薦使用這種方法，當然根據自己的專案選擇最合理的方案才是最靠譜的。

在 Vue 中使用 icon

在元件化框架這麼火熱的今天當然要介紹一下，如何在Vue等專案中來使用icon。本人的主要技術棧是Vue所以以Vue作例子。 程式碼很簡單。直接貼程式碼了。

<template>
  <svg class="v-icon" aria-hidden="true">
    <use :xlink:href="iconName"></use>
  </svg>
</template>

<script>
  export default {
    name: 'v-icon',
    props: {
      iconClass: {
        type: String,
        required: true
      }
    },
    computed: {
      iconName () {
        return `#icon-${this.iconClass}`
      }
    }
  }
</script>

<style scoped>
  .v-icon {
    width: 1em;
    height: 1em;
    vertical-align: -0.15em;
    fill: currentColor;
    overflow: hidden;
  }
</style>
複製程式碼

main.js 中註冊全域性元件

import VIcon from './components/VIcon'
Vue.component('v-icon', VIcon)
複製程式碼

.vue 檔案中使用

<v-icon icon-name='xxx'/>
複製程式碼

總結

目前主要做的是後臺管理系統的專案對圖示質量不高，用的都是 font-class 方案，移動端用的是 symbol 方案。都是直接用的cdn線上連結。但是對於一些內網專案。更改新增圖示還是，不夠方便，請大家多點指點。提供一點解決思路。

相關文章