使用node 提取iconfont.css 图标，生成html
const fs = require('fs')
const file = fs.readFileSync('./iconfont.css').toString();
// eslint-disable-next-line @typescript-eslint/no-var-requires
const fontName = 'iconfont'
const icons = file.split('}');
// eslint-disable-next-line func-names
let html = '<!DOCTYPE html>' +
'<html lang="en">' +
'<head>' +
' <meta charset="UTF-8">' +
' <title>iconfont示例</title>' +
'<link rel="stylesheet" href="./iconfont.css">' +
'<style>.icon-list{display:flex;flex-wrap:wrap;color:#666;}.item{height: 84px;width: 104px;margin: 4px;text-align:center;}.class-name{font-size:12px;} i{font-size: 34px;}</style>' +
'</head>' +
'<body><div class="icon-list">';
// eslint-disable-next-line no-plusplus
for (let i = 0; i < icons.length; i++) {
const icon = icons[i];
if (icon.includes(':before')) {
const className = icon.split('.')[1].split(':')[0];
html += `<div class="item"><i class="${fontName} ${className}"></i><div class="class-name">${className}</div></div>`;
}
}
html += '</div></body>' +
'</html>'
fs.writeFileSync('./iconfont.html', html)
- 新建iconfont.js文件
- 将以上代码复制到js文件中
- 将文件放到图标文件所在的目录
- 运行命令
node iconfont.js
打开生成的iconfont.html 可以查看所有图标及样式名称
