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

　

阿里巴巴图标库

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

就是这个网站，里面的图标真的是很好看，我以前用的都是那个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的都能看得懂吧，哈哈！！这样就方便多了呢！

三哥的微信公众号，打开你的微信，扫描它，然后带走我！嘻嘻！

三哥QQ交流群

相关阅读

淘宝卡券包怎么使用？

不知道大家知不知道淘宝卡券包呢?可能很多朋友和小编一样经常玩淘宝，但是对于手机淘宝卡券包一无所知。手机淘宝卡券包其实就相当

JAVA异常处理机制（二）——throws/throw的区别和使用

JAVA中throw和throws的区别：https://www.cnblogs.com/xiohao/p/3547443.html 区别：（摘自上面的博客）1、throws出现在方法函数头；而thro

使用外网访问Microsoft 远程桌面(Microsoft Remote De

就在昨天博主发现有一款微软官方的APP可以实现在手机上远程操控电脑，抱着玩一玩心态下下来，使用之后发现不愧是官方应用，远程操作起

使用Python获取磁力种子

一、磁力链接 现在我们使用迅雷等工具下载资源的时候，基本上都只需要一个叫做磁力链接的东西就可以了，非常方便。 二、磁力定义 磁

Gson的介绍和使用

Gson介绍： GSON是Google提供的用来在Java对象和JSON数据之间进行映射的Java类库。可以将一个Json字符转成一个Java对象，或者将一个