前端如何使用阿里巴巴图标库

最近换工作后，发现美工给的图标都来自一个叫做阿里巴巴矢量图标库的网站，从此让我开启了新世界的大门，百度就能出来
这里写图片描述

就是这个网站，里面的图标真的是很好看，我以前用的都是那个font awesome图标库，我来给大家看下
这里写图片描述

后来我就觉得，不能用这个图标库了，因为美工都是给阿里巴巴矢量图，我用这个，跟设计图不一样啊，于是我就在想，既然UI设计师能用，那么前端代码也能用吧，于是我点开了帮助，果然能用
这里写图片描述

web前端和Android和ios用法都在以上截图里了，我主要做web前端，所以，主要看前端的东西，后来我觉得那个svg的用法很不错，将来肯定是主流的用法，于是应用到vue项目里了，但是，令人恶心的是，每次用它都要这么写

<svg class="icon" aria-hidden="true">
    <use xlink:href="#icon-xxx"></use>
</svg>

感觉很不爽啊，我希望是写一个标签就可以了啊，于是就想到了封装到vue组件中去，个人认为注册一个全局组件就好，代码如下，在main.js中写

//全局注册一个字体的图标标签
Vue.component('icon', 
    {
        name:"icon",
        template:`<svg aria-hidden="true" :class = "'icon' + ' ' + className " v-if = "icon && className">
                    <g>
                        <title v-if = "title">{{title}}</title>   
                        <use :xlink:href="'#' + icon"></use>
                    </g>
                </svg>
                <svg aria-hidden="true"  class = "icon" v-else-if = "icon && !className">
                    <g>
                        <title v-if = "title">{{title}}</title>   
                        <use :xlink:href="'#' + icon"></use>
                    </g>
                </svg>
                `,
        props:["className","title","icon"]
    }
)

然后用的时候就可以这么用了

<icon :icon = "'exit'" @click.native = "exit()"></icon>

<icon :icon = "'lajitong1'" :title = "'删除'" @click.native = "del(item.id)"></icon>

<icon :icon = "item.icon" :className = "'titleIcon'" v-if = "item.icon"></icon>

相信各位用过vue的都能看得懂吧，哈哈！！这样就方便多了呢！

前端如何使用阿里巴巴图标库

猜你喜欢