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

最近换工作后,发现美工给的图标都来自一个叫做阿里巴巴矢量图标库的网站,从此让我开启了新世界的大门,百度就能出来
前端如何使用阿里巴巴图标库_第1张图片

就是这个网站,里面的图标真的是很好看,我以前用的都是那个font awesome图标库,我来给大家看下
前端如何使用阿里巴巴图标库_第2张图片

后来我就觉得,不能用这个图标库了,因为美工都是给阿里巴巴矢量图,我用这个,跟设计图不一样啊,于是我就在想,既然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:`
                
                `,
        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交流群
在这里插入图片描述

你可能感兴趣的:(JavaScript)