结合阿里巴巴icon-font 图标库封装icon组件

使用效果

步骤

• 下载icon-font项目包
• 导入项目下
• 引入icon-font.js 和 icon-font.css
• 封装icon组件

Unicode & Symbol & fontclass

icon-font

视图使用

<template>
    <div>
        <!--使用iview的icon组件-->
        <Icon :size="40" type="md-menu" color="green"/>
        <!--使用iview的icon组件自定义样式，采用font-class-->
        <Icon custom="iconfont icon-icon-test"/>
        <!--使用icon-font的unicode图标-->
        <i class="iconfont " style="color: dodgerblue">&#xe638;</i>
        <!--使用icon-font的Symbol图标-->
        <svg class="icon" aria-hidden="true" style="font-size: 30px;">
            <use xlink:href="#icon-BaseballHat"></use>
        </svg>
        <!--使用icon-font的font-class图标-->
        <i class="iconfont icon-icon-test" style="font-size: 30px;"></i>

        <!--自定义单色图标组件-->
        <!--:size=30 或 :size="30" 不能size="30" size需要为 Number-->
        <icon-font icon="test2" :size="30" color="pink"/>
        <!--自定义多色图标组件-->
        <icon-svg icon="BaseballDiamond" :size="50"/>
    </div>
</template>

引入icon-font

引入icon-font官方教程

• 修改 mian.js

// 引入阿里巴巴的icon样式
import '@/assets/font/iconfont.js'
import '@/assets/font/iconfont.css'

// 自定义icon组件
import IconFont from '_c/icon-font'
import IconSvg from '_c/icon-svg'

// 全局注册组件
Vue.component('icon-font',IconFont);
Vue.component('icon-svg',IconSvg);

• app.vue 添加style样式

    @font-face {font-family: 'iconfont';
        src: url('./assets/font/iconfont.eot');
        src: url('./assets/font/iconfont.eot?#iefix') format('embedded-opentype'),
        url('./assets/font/iconfont.woff') format('woff'),
        url('./assets/font/iconfont.ttf') format('truetype'),
        url('./assets/font/iconfont.svg#iconfont') format('svg');
    }
    .iconfont{
        font-family:"iconfont" !important;
        font-size:16px;font-style:normal;
        -webkit-font-smoothing: antialiased;
        -webkit-text-stroke-width: 0.2px;
        -moz-osx-font-smoothing: grayscale;
    }
    .icon {
        width: 1em; height: 1em;
        vertical-align: -0.15em;
        fill: currentColor;
        overflow: hidden;
    }

封装单色[fontclass] icon-font

<template>
    <i :class="classes" :style="styles"/>
</template>
<script>
    export default {
        name: 'IconFont',
        props: {
            icon: {
                type: String,
                default: ''
            },
            size: {
                type: Number,
                default: 12
            },
            color: {
                type: String,
                default: '#515a6e'
            }
        },
        computed: {
            classes () {
                return [
                    'iconfont',
                    `icon-icon-${this.icon}`
                ]
            },
            styles () {
                return {
                    color: this.color,
                    fontSize: `${this.size}px`
                }
            }
        }
    }
</script>

封装多色Icon[Symbol]组件 icon-svg

<template>
    <svg class="icon" aria-hidden="true" :style="style">
        <use :xlink:href="iconName"></use>
    </svg>
</template>
<script>
    export default {
            name: 'IconSvg',
            props: {
                icon: {
                    type: String,
                    default: ''
                },
                size: {
                    type: Number,
                    default: 20
                }
            },
            computed: {
                style () {
                    return {
                        fontSize: `${this.size}px`
                    }
                },
                iconName () {
                    return  `#icon-${this.icon}`
                }
            }
    }
</script>