icon 组件

查看在线列子

项目中效果截图

使用介绍

效果中红框中的图标，是vue-awesome图标．

该组件是通过全局注册，局部组件方式后期运用后实现．

1. 在vue主文件中引入 ```js import Vue from 'vue' import router from './router' import App from './app.vue' import store from './store'

import '*/awesome' // 引入icon组件全局注册

new Vue({ el: '#app', store, router, i18n, // components: { App } render: h => h(App) })

2. 使用
```html
<icon 
    name="chevron-left" 
    scale="1" 
    style="color: #fff"></icon>

name是图标名称，这个名称可在awesome官网查找

全局注册

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
    }
}*/