Vue.js 使用 Vue-Awesome

🏷️ Vue.js

源码

在 Github 上 Vue-Awesome 。

安装

npm install vue-awesome

DEMO

DEMO

示例代码

基础

<icon name="flag"></icon>

放大/缩小 Scale

<icon name="language" scale="3"></icon>

旋转 Spin

<icon name="refresh" spin></icon>

反转 Flip

<icon name="signal" flip="horizontal"></icon>

标签

<icon name="code" label="Source Code"></icon>

叠加

<icon label="No Photos">
  <icon name="camera"></icon>
  <icon name="ban" scale="2" class="alert"></icon>
</icon>

自定义 Icon

SVG

// ES Modules with vue-loader
import Icon from 'vue-awesome/components/Icon.vue'

Icon.register({
  'html5-c': {
    width: 512,
    height: 512,
    raw: '<path fill="#E34F26" d="M71,460 L30,0 481,0 440,460 255,512"/><path fill="#EF652A" d="M256,472 L405,431 440,37 256,37"/><path fill="#EBEBEB" d="M256,208 L181,208 176,150 256,150 256,94 255,94 114,94 115,109 129,265 256,265zM256,355 L255,355 192,338 188,293 158,293 132,293 139,382 255,414 256,414z"/><path fill="#FFF" d="M255,208 L255,265 325,265 318,338 255,355 255,414 371,382 372,372 385,223 387,208 371,208zM255,94 L255,129 255,150 255,150 392,150 392,150 392,150 393,138 396,109 397,94z"/>'
  }
})

导入到项目

import Vue from 'vue'

/* Pick one way between the 2 following ways */

// only import the icons you use to reduce bundle size
import 'vue-awesome/icons/flag'

// or import all icons if you don't care about bundle size
import 'vue-awesome/icons'

/* Register component with one of 2 methods */

import Icon from 'vue-awesome/components/Icon'

// globally (in your main .js file)
Vue.component('icon', Icon)

// or locally (in your component file)
export default {
  components: {
    Icon
  }
}

所有 Icon 一览

http://fontawesome.io/icons/

参考

1. vuejs-折腾系列（一）vue-fontawesome 使用