【Vue.js】使用Vue-Awesome

## 源码

在 Github 上 [Vue-Awesome](https://github.com/Justineo/vue-awesome) 。

## 安装

```
npm install vue-awesome
```

## DEMO

[DEMO](https://justineo.github.io/vue-awesome/demo/)

## 示例代码

### 基础

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

### 放大/缩小 Scale

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

### 旋转 Spin

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

### 反转 Flip

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

### 标签

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

### 叠加

```html
<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"/>'
  }
})
```

## 导入到项目

```js
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/](http://fontawesome.io/icons/)

## 参考

------

> 1. [vuejs-折腾系列（一）vue-fontawesome使用](http://blog.csdn.net/gccll/article/details/72457829)

------

【Vue.js】使用Vue-Awesome

目录

关联

热门

最新