当前位置: 首页 > article >正文

把iconfont 图标导出为json

import re
import json

with open('iconfont.css', 'r', encoding='utf-8') as f:
    content = f.read()

icons = []
matches = re.findall(r'\.icon-(.*?):before\s*{\s*content:\s*"(.*?)";', content)
for match in matches:
    icon_name = match[0]
    unicode_content = match[1]
    icons.append({
        "name": icon_name,
        "class": f"icon-{icon_name}",
        "unicode": unicode_content
    })

with open('icons.json', 'w', encoding='utf-8') as f:
    json.dump(icons, f, ensure_ascii=False, indent=4)

这个脚本会读取 iconfont 的 CSS 文件,提取出图标类名和 Unicode 编码,并生成一个 JSON 文件。
请注意,以上方法可能需要根据实际情况进行调整,并且如果 iconfont 的 CSS 结构发生变化,可能需要修改相应的正则表达式或处理逻辑。

在Vue中使用

<template>
  <div>
    <template v-for="iconClass in iconClasses">
      <i :class="'iconfont '+ iconClass"></i>
    </template>
  </div>
</template>

<script>
import iconClasses from './icons.json';

export default {
  data() {
    return {
      iconClasses,
    };
  },
};
</script>

http://www.kler.cn/a/293364.html

相关文章:

  • 【专题】计算机网络之网络层
  • 多叉树笔记
  • IEC60870-5-104 协议源码架构详细分析
  • react动态路由
  • 记录学习react的一些内容
  • FFmpeg 4.3 音视频-多路H265监控录放C++开发十三:将AVFrame转换成AVPacket。视频编码原理.编码相关api
  • rsync搭建全网备份
  • 奥威让您更懂现金流情况
  • 【2024数模国赛赛题思路公开】国赛E题思路丨附可运行代码丨无偿自提
  • CRUD的最佳实践,联动前后端,包含微信小程序,API,HTML等(三)
  • Kubernetes--服务发布(Service、Ingress)
  • ubuntu24.04 为什么扬声器没有声音,但是戴上耳机有声音
  • Docker 配置国内镜像源
  • SpringCloud:构建分布式系统的利器
  • 【全网首发】2024数学建模国赛C题39页word版成品论文【附带py+matlab双版本解题代码+可视化图表】
  • 深度学习基础案例4--构建CNN卷积神经网络实现对猴痘病的识别(测试集准确率86.5%)
  • 【解决bug之路】npm install node-sass(^4.14.1)连环报错解决!!!(Windows)
  • Python 语法糖:让编程更简单
  • redis的持久化RDB和AOF
  • Qt 实战(10)MVD | 10.1、MVD机制详解
  • RabbitMQ 基础架构流程 数据隔离 创建用户
  • 利用深度学习实现验证码识别-2-使用Python导出ONNX模型并在Java中调用实现验证码识别
  • 对极约束及其性质 —— 公式详细推导
  • ElementUI2.x El-Select组件 处理使用远程查找时下拉箭头丢失问题
  • 用 CSS 实现太阳系运行效果
  • XSS 漏洞检测与利用全解析:守护网络安全的关键洞察