vue-awesome | 一款基于vuejs的SVG图标组件

vue-awesome是一款基于vuejs的SVG图标组件。它内置 Font Awesome 图标。可以轻松的在页面上展示SVG图标。

使用方法

安装

如果您想使用vue-awesome图标组件，首先您需要安装它，命令如下：

npm install vue-awesome
		

使用

在下面两种方式中任选一种

// 仅引入用到的图标以减小打包体积			
import 'vue-awesome/icons/flag'

// 或者在不关心打包体积时一次引入全部图标
import 'vue-awesome/icons'

// 全局注册（main.js）
import Icon from 'vue-awesome/components/Icon'

Vue.component('v-icon', Icon)

// 或局部注册
export default {
 components: {
 'v-icon': Icon
 }
}
		

基础用法

<v-icon name="flag"/>			
		

添加选项

<v-icon name="sync" scale="2" spin/>
<v-icon name="comment" flip="horizontal"/>
<v-icon name="code-branch" label="Forked Repository"/>			
		

堆叠图标

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

自定义图标

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

// vue 图标
Icon.register({
  vue: {
    width: 256,
    height: 221,
    polygons: [
      {
        style: 'fill:#41B883',
        points: '0,0 128,220.8 256,0 204.8,0 128,132.48 50.56,0 0,0'
      },
      {
        style: 'fill:#35495E',
        points: '50.56,0 128,133.12 204.8,0 157.44,0 128,51.2 97.92,0 50.56,0'
      }
    ]
  }
})			
		

配置参数

• name: 如果本组件没有用作图标堆栈的容器，那么这个字段是必须的。所有合法的值都对应于图标文件相对于 icons 目录的路径。请注意当你在 FontAwesome 官网查找到图标名词后，需要确认一下图标集的名称。
• scale: 用来调整图标尺寸，默认值为 1。
• spin: 用来指定图标是否需要旋转。默认值为 false。（不能与 pulse 一同使用。）
• pulse: 用来指定图标是否有脉冲旋转的效果。默认值为 false。（不能与 spin 一同使用。）
• inverse: 为 true 时图标颜色将被设置为 #fff。默认值为 false。
• flip: 用来指定图标是否需要翻转。可选值：'vertical'|'horizontal'|'both'。
• label: 当指定时会设置图标的 aria-label。
• title: 为图标设置标题。

github网址：https://github.com/Justineo/vue-awesome