vue icon组件

icon

1. 用的阿里iconfont，在官网项目中生成js文件引入到index.html

    <script src='//at.alicdn.com/t/font_983260_pg8k6k5k6l9.js'></script>

2. 书写icon.vue

<template>
    <svg class="icon" :class="sizeValue" aria-hidden="true">
        <use :xlink:href='iconName'></use>
    </svg>
</template>
<script>
export default {
    // 组件名称
    name: 'mimi-icon',
    // 定义传进来的值
    props: {
        name: {
            type: String,
            required: true,
            default: ''
        },
        size:{
            type: String,
            required: false,
            default: ''
        },
        // 当三种尺寸不满足时，可自定义
        w:{
            type: String || Number,
            required: false,
            default: ''
        },
        h:{
            type: String || Number,
            required: false,
            default: ''
        }
    },
    computed: {
        iconName() {
            return `#${this.name}`
        },
        sizeValue() {
            if(this.size) {
                return this.size;
            }else {
                // 默认取最小
                return 'sl';
            }
        }
    }
}
</script>
<style lang="scss" scoped>
.icon {
    width: 1em;
    height: 1em;
    vertical-align: -0.15em;
    fill: currentColor;
    overflow: hidden;
}
.sl{
    height: 14px;
    width: 14px;
}
.md{
    height: 24px;
    width: 24px;
}
.lg {
    height: 36px;
    width: 36px;
}
</style>

3. 书写index.js注册为全局

import Icon from './icon/icon.vue'
export default (Vue)=>{
    Vue.component("mimi-icon",Icon);
}

4. 注入main.js

Vue.use(commonComponent);