vue iconfont

Vue iconfont

Use iconfont.cn con más elegancia y admite tanto font-class 引入como symbol 引入.

Instalar

 # Yarn
yarn add vue-iconfont

# npm
npm i vue-iconfont

CDN: JSDELIVR | Unpkg (se puede usar a través de window.VueIconfont )

usar

Primero instalar VueIconfont usando Vue.use :

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

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

// ......

Entonces se puede usar en el componente como este:

 < icon name =" right " /> 

opción

Opción	tipo	valor predeterminado	ilustrar
etiqueta	String	icon	Etiqueta de componentes de icono.
tipo	font | svg	font	font : representa el icono de fuente introducido con la clase de fuente. svg : representa el icono SVG introducido con el símbolo.
prefijo	String	-	Representa un prefijo de nombre de clase o un prefijo de nombre de icono SVG.
Familia	String	= prefix	Solo válido cuando type es font , lo que indica una clase con conjunto de estilo font-family .
duende	String	-	Solo válido cuando type es svg , significa SVG Sprite, que se cargará automáticamente, como: <svg><symbol id="ok">......</symbol></svg>
componente	{ name: String, 'props': Object, beforeRender: context => void }	{name: 'icon', 'props': {}, beforerender: () => {}}	name representa la opción name del componente, props representan la opción de props del componente, beforeRender es una función que recibe el contexto del renderizado en el componente de la función VUE, y puede aplicar cambios en el contexto.

Ejemplo completo

Configuración del proyecto

1. Abra图标管理> 我的项目y seleccione un proyecto.

2. Haga clic en更多操作> 编辑项目:

3. Establezca FontClass/Symbol 前缀and Font Family en el mismo valor, y este valor es prefix en las options anteriores:

4. Haga clic en下载至本地para extraer la descarga del archivo de icono en la carpeta del proyecto.

Instalar

Puede usar Vue.use(VueIconfont, [options1, options2, ..., optionsN]) para definir diferentes componentes de iconos según sea necesario.

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

¿Cómo establecer el color del icono, el tamaño, etc.?

Acabo de configurar su CSS:

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