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'); 

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

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

svg图标

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

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

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

<!--src/components/svg-icon/view/Index.vue-->
<script lang="tsx"> // 必须引入iconfont.js
import '@/assets/font/iconfont';
import { defineComponent, PropType, useAttrs } from 'vue';

export default defineComponent({
  name: 'SvgIcon',
  props: {
    name: {
      type: String as PropType<