vue iconfont

Vue iconfont

Utilisez iconfont.cn plus élégamment et prend en charge font-class 引入et symbol 引入.

Installer

 # Yarn
yarn add vue-iconfont

# npm
npm i vue-iconfont

CDN: jsdelivr | UNPKG (peut être utilisé via window.VueIconfont )

utiliser

Installez d'abord VueIconfont en utilisant Vue.use :

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

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

// ......

Ensuite, il peut être utilisé dans le composant comme celui-ci:

 < icon name =" right " /> 

options

Options	taper	valeur par défaut	illustrer
étiqueter	String	icon	Étiquette des composants icônes.
taper	font | svg	font	font : représente l'icône de police introduite avec la classe de police. svg : représente l'icône SVG introduite avec le symbole.
préfixe	String	-	Représente un préfixe de nom de classe ou un préfixe de nom d'icône SVG.
Famille	String	= prefix	Seulement valide lorsque type est font , indiquant une classe avec un ensemble de style font-family .
lutin	String	-	Seulement valide lorsque type est svg , cela signifie SVG Sprite, qui sera automatiquement chargé, tel que: <svg><symbol id="ok">......</symbol></svg>
composant	{ name: String, 'props': Object, beforeRender: context => void }	{name: 'icon', 'accesstes': {}, beForenreder: () => {}}	name représente l'option name du composant, props représentent l'option props du composant, beforeRender est une fonction qui reçoit le contexte du rendu dans le composant de la fonction VUE et vous pouvez appliquer des modifications au contexte.

Exemple complet

Configuration du projet

1. Open图标管理> 我的项目et sélectionnez un projet.

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

3. Définissez FontClass/Symbol 前缀et Font Family Form sur la même valeur, et cette valeur est prefix dans les options ci-dessus:

4. Cliquez sur下载至本地pour extraire le téléchargement du fichier icône dans le dossier du projet.

Installer

Vous pouvez utiliser Vue.use(VueIconfont, [options1, options2, ..., optionsN]) pour définir différents composants d'icônes au besoin.

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

utiliser

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

Comment définir la couleur, la taille, etc.?

Il suffit de définir son CSS:

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