vue引入阿里圖標庫（iconfont）單色和彩色圖標

使用組件庫時，圖標每每不能知足需求，因此咱們經常須要用到第三方圖標庫。阿里圖標庫是咱們的常客。有兩種形式，一是單色，二是彩色的。

單色圖標的引用

• 一、在iconfont官網選圖標，加入購物車，加入項目，下載到本地，解壓
• 二、在項目src目錄新建目錄font，用於存放剛纔下載解壓的代碼

• 三、在main.js導入iconfont.css文件

  import './font/iconfont/iconfont.css'

• 四、在代碼中使用class="iconfont icon-XXX"就可使用圖標了

  這是直接引用，而像Element-UI則是將其與本身的圖標進行了融合。

  Element-UI引入第三方圖標庫：

  • 在iconfont官網選圖標，加入購物車，加入項目
  • 編輯項目，修改FontClass/Symbol 前綴爲：el-icon-xx （xx爲本身定義的類名，注意不要與Element自身的圖標類名重合）
  • 將圖標項目下載至本地，解壓
  • 在項目src目錄新建目錄font，用於存放剛纔下載解壓的代碼

  • 打開iconfont.css文件，將如下代碼加進去：

    [class^="el-icon-my"],
    [class*=" el-icon-my"]/*這裏有空格*/*
    {
      font-family: "iconfont" !important;
      font-size: 16px;
      font-style: normal;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }

• 在main.js導入iconfont.css文件
  import './font/iconfont/iconfont.css'
• 打開在阿里icon的項目，複製你想要的圖標代碼
• 使用方式與Element-UI自帶的圖標同樣

彩色圖標

• 一、在iconfont官網選圖標，加入購物車，加入項目，注意選擇Symbol，再下載到本地
• 二、在項目src目錄新建目錄font，用於存放剛纔下載解壓的代碼，或者只拷貝其 iconfont.js文件
• 三、在main.js導入iconfont.js文件

• 四、寫入圖標代碼

  <svg class="icon" aria-hidden="true">
     <use xlink:href="#icon-lianxi"></use>
  </svg>

  注意： 在這裏要用#加class名

• 五、寫入svg圖標通用樣式

  .icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
  }

補充：aria-hidden 的意思

　　圖標的可訪問性

　　現代的輔助技術可以識別並朗讀由 CSS 生成的內容和特定的 Unicode 字符。爲了不屏幕識讀設備抓取非故意的和可能產生混淆的輸出內容（尤爲是當圖標純粹做爲裝飾用途時），咱們爲這些圖標設置了 aria-hidden="true" 屬性。

感謝大神的分享：
https://www.cnblogs.com/golov...
https://www.jianshu.com/p/59d...