如何在Vue專案中使用阿里的Iconfont

緣氏集團技術員發表於2018-05-26
Vue阿里

正片之前先推廣下阿里的Iconfont，相簿豐富，支援個性化定製，只需新增需要的圖示，建立專案下載到本地，放在專案檔案目錄下即可，推薦大家使用。

iconfont 的三種使用方式

1. Unicode

  • 個人習慣在src目錄下新建一個icon資料夾存放下載的樣式檔案
  • 然後在src目錄下新建style.css檔案統一管理樣式
@font-face {
  font-family: "iconfont";
  src: url('./icon/iconfont.eot'); /* IE9*/
  src: url('./icon/iconfont.eot#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('./icon/iconfont.woff') format('woff'), /* chrome, firefox */
  url('./icon/iconfont.ttf') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
  url('./icon/iconfont.svg#iconfont') format('svg'); /* iOS 4.1- */
}
.iconfont {
 font-family:"iconfont" !important;
 font-size:56px;
 color: red;
 font-style:normal;
 -webkit-font-smoothing: antialiased;
 -webkit-text-stroke-width: 0.2px;
 -moz-osx-font-smoothing: grayscale;
}
複製程式碼
  • 在 main.js 中引入style.css
import './style.css'
複製程式碼
  • 現在即可挑選相應圖示並獲取字型編碼，應用於頁面
<i class="iconfont">&#xe627;</i>
複製程式碼

2. Font-class

使用方式與使用unicode相似，只需修改下style.css檔案

  • 修改 style.css檔案（同樣別忘了main.js檔案中引入）
@import './icon/iconfont.css'
複製程式碼
  • 即可用font-class的方式在頁面使用圖示
<i class="iconfont icon-fenxiang"></i>
複製程式碼

3. Symbol

區別於unicode與font-class，使用symbol需要引入的是js檔案，此方法生成的圖示可以不用傳送woff|eot|ttf|這些很多個字型庫請求了，兼具前兩種方法的優點，是正真的向量圖示，推薦使用。

  • 在main.js中引入圖示js檔案
import './icon/iconfont.js'
複製程式碼
  • 在style.css檔案中寫入圖示樣式（同樣別忘了main.js檔案中引入）
.icon {
  width: 1em; height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
複製程式碼
  • 即可用symbol的方式在頁面使用圖示
<svg class="icon" aria-hidden="true">
  <use xlink:href="#icon-fenxiang"></use>
</svg>
複製程式碼

補充：自己動手封裝Icon元件

  • 元件模板icon-svg.vue
<template>
  <svg class="svg-icon" aria-hidden="true">
    <use :xlink:href="iconName"></use>
  </svg>
</template>

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

<style>
.svg-icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
</style>

複製程式碼
  • 全域性引入
import IconSvg from '@/components/icon-svg'
//全域性註冊icon-svg
Vue.component('icon-svg', IconSvg)
複製程式碼
  • 現在就可以優雅的在專案中使用圖示啦，快去試試吧~
<icon-svg icon-class="fenxiang" />
複製程式碼

相關文章