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>

结果也是一样的

结语

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

相关推荐
贵沫末3 分钟前
React——基础
前端·react.js·前端框架
aklry15 分钟前
uniapp三步完成一维码的生成
前端·vue.js
Rubin9322 分钟前
判断元素在可视区域?用于滚动加载,数据埋点等
前端
爱学习的茄子22 分钟前
AI驱动的单词学习应用:从图片识别到语音合成的完整实现
前端·深度学习·react.js
用户38022585982423 分钟前
使用three.js实现3D地球
前端·three.js
程序无bug25 分钟前
Spring 面向切面编程AOP 详细讲解
java·前端
zhanshuo25 分钟前
鸿蒙UI开发全解:JS与Java双引擎实战指南
前端·javascript·harmonyos
撰卢1 小时前
如何提高网站加载速度速度
前端·javascript·css·html
10年前端老司机1 小时前
在React项目中如何封装一个可扩展,复用性强的组件
前端·javascript·react.js
Struggler2811 小时前
解决setTimeout/setInterval计时不准确问题的方案
前端