vue iconfont

Vue Iconfont

Gunakan iconfont.cn lebih elegan, dan mendukung font-class 引入dan symbol 引入.

Memasang

 # Yarn
yarn add vue-iconfont

# npm
npm i vue-iconfont

CDN: JSDELIVR | UNPKG (dapat digunakan melalui window.VueIconfont )

menggunakan

Pertama instal VueIconfont menggunakan Vue.use :

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

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

// ......

Maka dapat digunakan dalam komponen seperti ini:

 < icon name =" right " /> 

opsi

Opsi	jenis	nilai default	menjelaskan
menandai	String	icon	Label Komponen Ikon.
jenis	font | svg	font	font : Mewakili ikon font yang diperkenalkan dengan kelas font. svg : Mewakili ikon SVG yang diperkenalkan dengan simbol.
awalan	String	-	Mewakili awalan nama kelas atau awalan nama ikon SVG.
Keluarga	String	= prefix	Hanya valid saat type adalah font , menunjukkan kelas dengan set gaya font-family .
sprite	String	-	Hanya valid saat type adalah svg , itu berarti SVG sprite, yang akan dimuat secara otomatis, seperti: <svg><symbol id="ok">......</symbol></svg>
komponen	{ name: String, 'props': Object, beforeRender: context => void }	{name: 'ikon', 'props': {}, beforerender: () => {}}	name mewakili opsi name dari komponen, props mewakili opsi props dari komponen, beforeRender adalah fungsi yang menerima konteks render dalam komponen fungsi VUE, dan Anda dapat menerapkan perubahan pada konteks.

Contoh Lengkap

Konfigurasi Proyek

1. Buka图标管理> 我的项目dan pilih proyek.

2. Klik更多操作> 编辑项目:

3. Atur item FontClass/Symbol 前缀FOND dan Font Family FORMASI, dan nilai ini adalah prefix dalam options di atas:

4. Klik下载至本地untuk mengekstrak unduhan file ikon ke folder proyek.

Memasang

Anda dapat menggunakan Vue.use(VueIconfont, [options1, options2, ..., optionsN]) untuk mendefinisikan komponen ikon yang berbeda sesuai kebutuhan.

 // 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 )
} )

menggunakan

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

Bagaimana cara mengatur warna ikon, ukuran, dll.?

Cukup atur CSS -nya:

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