vue iconfont

Vue iconfont

Use iconfont.cn com mais elegância e suporta font-class 引入e symbol 引入.

Instalar

 # Yarn
yarn add vue-iconfont

# npm
npm i vue-iconfont

CDN: JSDelivr | Unpkg (pode ser usado via window.VueIconfont )

usar

Primeiro instale VueIconfont usando Vue.use :

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

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

// ......

Então pode ser usado no componente como este:

 < icon name =" right " /> 

opções

Opções	tipo	valor padrão	ilustrar
marcação	String	icon	Rótulo do componente do ícone.
tipo	font | svg	font	font : representa o ícone da fonte introduzido com a classe de fonte. svg : representa o ícone SVG introduzido com símbolo.
prefixo	String	-	Representa um prefixo de nome de classe ou um prefixo de nome do ícone SVG.
Família	String	= prefix	Somente válido quando type é font , indicando uma classe com conjunto de estilo font-family .
Sprite	String	-	Somente válido quando type é svg , significa SVG Sprite, que será carregado automaticamente, como: <svg><symbol id="ok">......</symbol></svg>
componente	{ name: String, 'props': Object, beforeRender: context => void }	{name: 'icon', 'props': {}, beforeRender: () => {}}	name representa a opção name do componente, props representam a opção de props do componente, beforeRender é uma função que recebe o contexto da renderização no componente da função Vue e você pode aplicar alterações no contexto.

Exemplo completo

Configuração do projeto

1. Open图标管理> 我的项目e selecione um projeto.

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

3. Defina FontClass/Symbol 前缀e o item Font Family para o mesmo valor, e esse valor é prefix nas options acima:

4. Clique em下载至本地para extrair o download do arquivo de ícone para a pasta do projeto.

Instalar

Você pode usar Vue.use(VueIconfont, [options1, options2, ..., optionsN]) para definir diferentes componentes do ícone, conforme necessário.

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

usar

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

Como definir a cor do ícone, tamanho, etc.?

Basta definir seu CSS:

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