vue iconfont

Vue Iconfont

Verwenden Sie iconfont.cn eleganter und unterstützt sowohl font-class 引入als auch symbol 引入.

Installieren

 # Yarn
yarn add vue-iconfont

# npm
npm i vue-iconfont

CDN: Jsdelivr | UNPKG (kann über window.VueIconfont verwendet werden.vuiconfont)

verwenden

Installieren Sie zuerst VueIconfont mit Vue.use ::

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

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

// ......

Dann kann es in der Komponente wie folgt verwendet werden:

 < icon name =" right " /> 

Optionen

Optionen	Typ	Standardwert	veranschaulichen
Etikett	String	icon	Symbolkomponentenetikett.
Typ	font | svg	font	font : Repräsentiert das mit der Schriftklasse eingeführte Schrift-Symbol. svg : Repräsentiert das mit Symbol eingeführte SVG -Symbol.
Präfix	String	- -	Repräsentiert ein Präfix des Klassennamens oder ein Präfix des SVG -Symbolnamens.
Familie	String	= prefix	Nur gültig, wenn type font ist, wobei eine Klasse mit dem Set mit font-family angezeigt wird.
Sprite	String	- -	Nur gültig, wenn type svg ist, bedeutet es SVG Sprite, das automatisch geladen wird, wie z <svg><symbol id="ok">......</symbol></svg>
Komponente	{ name: String, 'props': Object, beforeRender: context => void }	{name: 'icon', 'props': {}, Beforerender: () => {}}	name gibt die name der Namen der Komponente an, props stellt die Option props der Komponente dar, beforeRender ist eine Funktion, die den Kontext des Renders in der Vue -Funktionskomponente empfängt, und Sie können Änderungen im Kontext anwenden.

Vollständiges Beispiel

Projektkonfiguration

1. Open图标管理> 我的项目und wählen Sie ein Projekt aus.

2. Klicken Sie auf更多操作> 编辑项目:

3. Setzen Sie FontClass/Symbol 前缀und Font Family auf denselben Wert, und dieser Wert ist prefix in den obigen options :

4. Klicken Sie下载至本地um den Download der Symboldatei in den Projektordner zu extrahieren.

Installieren

Sie können Vue.use(VueIconfont, [options1, options2, ..., optionsN]) verwenden, um nach Bedarf verschiedene Symbolkomponenten zu definieren.

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

verwenden

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

Wie setze ich Symbolfarbe, Größe usw.?

Setzen Sie einfach seine CSS:

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