vue iconfont

Vue Iconfont

更優雅地使用Iconfont.cn，同時支持font-class 引入和symbol 引入。

安裝

 # Yarn
yarn add vue-iconfont

# npm
npm i vue-iconfont

CDN：jsDelivr | UNPKG （可通過window.VueIconfont使用）

使用

首先用Vue.use安裝VueIconfont ：

 import Vue from 'vue'
import VueIconfont from 'vue-iconfont'

Vue . use ( VueIconfont /*, options*/ )

// ......

然後就可以在組件中這樣使用：

 < icon name =" right " /> 

options

選項	類型	預設值	說明
tag	String	icon	圖標組件的標籤。
type	font | svg	font	font ：表示用font-class 引入的字體圖標。 svg ：表示用symbol 引入的SVG 圖標。
prefix	String	-	表示類名前綴或SVG 圖標名稱前綴。
family	String	= prefix	僅當type為font時有效，表示設置了font-family樣式的類。
sprite	String	-	僅當type為svg時有效，表示SVG Sprite，其會被自動加載，形如： <svg><symbol id="ok">......</symbol></svg>
component	{ name: String, 'props': Object, beforeRender: context => void }	{ name: 'Icon', 'props': {}, beforeRender: () => {} }	name表示組件的name選項， props表示組件的props選項， beforeRender是一個函數，它接收Vue 函數組件中render 的context，你可以對context 施加改變。

完整實例

項目配置

1. 打開iconfont.cn 的图标管理> 我的项目，選擇一個項目。

2. 點擊更多操作> 编辑项目：

3. 將FontClass/Symbol 前缀和Font Family表單項設為同一個值，這個值就是上面options中的prefix ：

4. 點擊下载至本地將圖標文件下載解壓到項目文件夾中。

安裝

你可以使用Vue.use(VueIconfont, [options1, options2, ..., optionsN])按需定義不同的圖標組件。

 // index.js
import Vue from 'vue'
import VueIconfont from 'vue-iconfont'
import App from './app.vue'

// 引入上面下载得到的使用 font-class 图标必须的 css 文件
import './iconfont/iconfont.css'

// 引入上面下载得到的使用 SVG 图标必须的 js 文件
import './iconfont/iconfont.js'

Vue . use ( VueIconfont , [
  // 定义 v-icon 组件以使用 font-class 图标
  {
    tag : 'v-icon' ,
    prefix : 'v-icon' ,
    type : 'font'
  } ,

  // 定义 v-svg-icon 组件以使用 SVG 图标
  {
    tag : 'v-svg-icon' ,
    prefix : 'v-icon' ,
    type : 'svg'
  }
] )

new Vue ( {
  el : '#app' ,
  render : h => h ( App )
} )

使用

 <!-- app.vue -->
< template >
  < div >
    < v-icon name =" right " />
    < v-svg-icon name =" right " />
  </ div >
</ template > 

如何設置圖標顏色、大小等？

直接設置其CSS 即可：

 < v-icon name =" right " style =" color: red; font-size: 2em; " />
< v-svg-icon name =" right " style =" color: blue; font-size: 14px; " />