CSS动态渲染字体图标(?伪元素 + Vue + less)

前言：在某个大型网站看到他们的字体图标有用到伪元素渲染的，在项目上也有类似的需求，还要实现动态去渲染。

遇到的问题：直接使用attr、或者var都是不能够去渲染的,只能将值传递到content上，不能够将图标展示出来。因为动态绑定的话，要不就是用js去操作，直接使用自定义的属性去传递值是实现不了的。

这里下载下来的字体图标class名是iconfont

具体以阿里图标为例，找到自己的字体图标项目，点击图标编辑，获取Unicode（16 进制）码，注意还要加上\

1、直接使用伪元素的做法是需要用到Unicode（16 进制）码

js 复制代码

//index.vue
<template>
    <div class="render-icon">渲染图标</div>
</template>
<style lang="less" scoped>
.render-icon {
    position: relative;
    &::before {
        position: absolute;
        content: "\e69d";
        font-family: iconfont;
        left: -20px;
        top: 50%;
        transform: translateY(-50%);
    }
}
</style>

结果如图展示

2、结合vue与less的动态绑定字体图标（失败演示）

js 复制代码

//requestData.js 模拟请求回来的数据，或者自定义渲染数据
export const iconData = [
  {
      id: '1',
      name: '图标一',
      icon: '\\e648'
  },
  {
      id: '2',
      name: '图标二',
      icon: '\\e64f'
  },  
]

js 复制代码

//index.vue
<template>
    <div v-for='item in iconData' :key='item.id'>
           <div class='render-icon' :data-icon='item.icon'>
               <span>{{item.name}}</span>
           </div>
    </div>
</template>

<script setup>
import {iconData} from './requestData.js';
</script>
<style lang='less' scoped>
.render-icon {
    position: relative;
    &::before {
        position: absolute;
        content: attr(data-icon);
        font-family: iconfont;
        left: -20px;
        top: 50%;
        transform: translateY(-50%);
    }
}
</style>

结果如图展示

3、正确的动态渲染方法

经过了第二点的出发，才找到正确的做法。既然是动态绑定值，那么直接绑定类名不是更直接吗。也就是绑定下图所指

假如不知道哪个类名，也很简单，根据Unicode（16 进制）码，在文件里ctrl + f查找对应的类名也可以，或者，我这边的类名开头是.icon-，加上下图所示的Font Class就可以了

所有数据拿到，开始改造第二部分的代码

js 复制代码

//requestData.js
export const iconData = [
  {
      id: '1',
      name: '图标一',
      icon: 'icon-magic_sparkels'
  },
  {
      id: '2',
      name: '图标二',
      icon: 'icon-moon'
  },  
]

这里必须要用before,因为字体图标需要被样式覆盖

js 复制代码

//index.vue
<template>
    <div v-for="item in iconData" :key="item.id">
        <div :class="['render-icon', item.icon]">
            <span>{{ item.name }}</span>
        </div>
    </div>
</template>

<script setup>
import { iconData } from "./requestData.js";
</script>
<style lang="less" scoped>
.render-icon {
    position: relative;
    &::before {
        position: absolute;
        font-family: iconfont;
        left: -20px;
        top: 50%;
        transform: translateY(-50%);
    }
}
</style>

结果如图所示

4、直接使用v-html进行渲染

这是另外一个做法，不使用伪元素，附上代码

js 复制代码

//requestData.js
export const iconData = [
  {
      id: '1',
      name: '图标一',
      icon: '&#xe69d;'
  },
  {
      id: '2',
      name: '图标二',
      icon: '&#xe6a3;'
  },  
]

js 复制代码

//index.vue
<template>
    <div v-for="item in iconData" :key="item.id">
        <div class="render-icon">
            <div class="iconfont" v-html="item.icon"></div>
            <span>{{ item.name }}</span>
        </div>
    </div>
</template>

<script setup>
import { iconData } from "./requestData.js";
</script>
<style lang="less" scoped>
.render-icon {
    display: flex;
    align-items: center;
    gap: 10px;
}
</style>

结果也是一样的

结语

这是目前本人能想到的做法，或者大佬们还有其它的做法，也可以评论指导一下哦，方便的话，可以帮忙点个小赞赞吗？