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: 为图标设置标题。