vue-iconfont

Vue Iconfont

更优雅地使用 Iconfont.cn，同时支持 font-class 引入 和 symbol 引入。

安装

# Yarn
yarn add vue-iconfont

# npm
npm i vue-iconfont

CDN：jsDelivr | UNPKG （可通过 window.VueIconfont 使用）

使用

首先用 Vue.use 安装 VueIconfont：

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

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

// ......

然后就可以在组件中这样使用：

<icon name="right" />

options

完整实例

项目配置

1. 打开 iconfont.cn 的 图标管理 > 我的项目，选择一个项目。

2. 点击 更多操作 > 编辑项目：

3. 将 FontClass/Symbol 前缀 和 Font Family 表单项设为同一个值，这个值就是上面 options 中的 prefix：

4. 点击 下载至本地 将图标文件下载解压到项目文件夹中。

安装

你可以使用 Vue.use(VueIconfont, [options1, options2, ..., optionsN]) 按需定义不同的图标组件。

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

使用

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

如何设置图标颜色、大小等？

直接设置其 CSS 即可：

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