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

当前位置:主页 > Vue > Vue组件 > vue-awesome | 一款基于vuejs的SVG图标组件
vue-awesome | 一款基于vuejs的SVG图标组件
分享:

    插件介绍

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

    浏览器兼容性

    浏览器兼容性
    时间:06-26
    阅读:
简要教程

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