• css3的attr函数使用，加载unicode矢量图标

    阿里矢量图标在项目中都用使用，通常一般我们引入css使用iconfont,或者我们使用svg加载图标，亦或我们可以使用Unicode，除了第一种与第二种，今天分享第三种方式unicode加载图标，希望看完在项目中能有所思考和帮助。

    正文开始…

    css加载图标

    这是我们项目中最常用的一种方式

    我在自己的iconfont[1]仓库中添加了几个图标

    打开前阵子我开源的一个移动端项目topfreeApplication[2]

    我们在common.less中引入阿里矢量图标的这个css

    /*src/assets/css/common.less*/
@import url('./normalize.less');
@import url('//at.alicdn.com/t/c/font_3470263_sw1krly77xh.css'); 

    • 1
    • 2
    • 3

    我们在src/pages/home/component/Search.vue 引入一个图标

    所以加入了一行代码,就将删除图标就加入我们的页面中了

    svg图标

    在这之前，我们都是用class方式加载，现在我们看下svg方式加载图标

    在src/pages/home/component/Search.vue组件中也看到我使用一个svg-icon的二次组件加载图标的

    我把svg-icon注册成一个全局组件