57 lines
1.8 KiB
JavaScript
57 lines
1.8 KiB
JavaScript
// generate-preview.js
|
|
const fs = require('fs');
|
|
const path = require('path');
|
|
|
|
function generateIconfontPreview(cssPath, outputPath) {
|
|
const cssContent = fs.readFileSync(cssPath, 'utf8');
|
|
|
|
// 解析图标
|
|
const iconRegex = /\.(icon-[^:]+):before\s*{\s*content:\s*["']\\([^"']+)["']/g;
|
|
const icons = [];
|
|
let match;
|
|
|
|
while ((match = iconRegex.exec(cssContent)) !== null) {
|
|
icons.push({
|
|
className: match[1],
|
|
unicode: '\\' + match[2]
|
|
});
|
|
}
|
|
|
|
// 计算引入css文件相对于 outputPath的路径
|
|
const relativeCssPath = path.relative(path.dirname(outputPath), cssPath);
|
|
|
|
// 生成 HTML
|
|
const html = `<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>Iconfont Preview</title>
|
|
<link rel="stylesheet" href="${relativeCssPath}">
|
|
<style>
|
|
body { font-family: Arial; padding: 20px; }
|
|
.grid { font-family: iconfont; display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; }
|
|
.icon { text-align: center; padding: 10px; border: 1px solid #ddd; }
|
|
.char { font-size: 24px; }
|
|
.name { font-size: 12px; margin-top: 5px; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h1>Iconfont Preview (${icons.length} icons)</h1>
|
|
<div class="grid">
|
|
${icons.map(icon => `
|
|
<div class="icon">
|
|
<div class="char ${icon.className}"></div>
|
|
<div class="name">${icon.className}</div>
|
|
</div>
|
|
`).join('')}
|
|
</div>
|
|
</body>
|
|
</html>`;
|
|
|
|
fs.writeFileSync(outputPath, html);
|
|
console.log(`预览已生成: ${outputPath}`);
|
|
}
|
|
|
|
// 使用
|
|
const cssPath = path.join(__dirname, '../common/css/iconfont.css');
|
|
const outputPath = path.join(__dirname, '../iconfont-preview.html');
|
|
generateIconfontPreview(cssPath, outputPath); |