阿里矢量图标在项目中都用使用，通常一般我们引入css使用iconfont,或者我们使用svg加载图标，亦或我们可以使用Unicode，除了第一种与第二种，今天分享第三种方式unicode加载图标，希望看完在项目中能有所思考和帮助。,这是我们项目中最常用的一种方式。,我在自己的iconfont仓库中添加了几个图标。,
,打开前阵子我开源的一个移动端项目topfreeApplication,我们在common.less中引入阿里矢量图标的这个css。,我在src/pages/home/component/Search.vue引入一个图标。,
,所以加入了一行代码,就将删除图标就加入我们的页面中了。,
,在这之前，我们都是用class方式加载，现在我们看下svg方式加载图标。,在src/pages/home/component/Search.vue组件中也看到我使用一个svg-icon的二次组件加载图标的。,我把svg-icon注册成一个全局组件。,src/components/index.ts,注意我们必须引入iconfont.js具体可以参考使用web文档,我们注意到我们css加载图标实际上图标的一个伪类元素加载的一个unicode。,
,加载图标实际上是引用了一个uncode，所以我们可以借鸡生蛋。,我们注意到我们在i标签上将icon-shanchu替换成了自己自定义的一个class，但同时也多了一个自定义属性unicode=””,这是一个很有用的属性，通常我们需要动态的更换图标时，我们就可以把这个unicode写在标签上，那怎么才能显示呢？,css有一个超强的函数特性attr,在css里面我们可以动态的取到unicode的值。,我们看下css代码,注意unicode就是你标签上的那个属性。,注意到没有，利用attr这个特性就可以成功的加载到unicode了（不过注意，因为我这个是vue3项目，在vue2中，我们必须v-html渲染这整个标签，不然图标始终显示不出来）,
,所以你会发现在css中你用attr这个属性就可以动态的加载标签上的unicode了。,在以上我们的图标用unicode就可以加载图标，同时我们也知道利用css中的attr函数成功解决了图标加载问题。,我们看看attr这个属性可以在我们项目中怎么用,在哪些场景可以用？,我们尝试写一个计数器。,对应的css。,我们使用了css3的函数var,以及calc,还有attr，这些都是css3的函数，注意var中的变量必须在:root{}中用–xxx申明成全局，即可使用,看下布局后的基本页面。,
,我们再看下对应的js。,我们通过操作.content的data-content,因此可以实现一个简单的倒计时效果。,因此我们就用css中attr结合js实现了一个计数器功能，关于cssattr还有更多待挖掘的功能，在动态改变图标等，attr是一种不错的选择方案,[1]iconfont： https://www.iconfont.cn/,[2]topfreeApplication： https://github.com/maicFir/topfreeApplication,[3]web文档： https://www.iconfont.cn/help/detail?spm=a313x.7781069.1998910419.d8cf4382a&helptype=code,[4]code example： https://github.com/maicFir/lessonNote/tree/master/html/07-attr
© 版权声明
文章版权归作者所有，未经允许请勿转载。
