图标预览
function extractIconClassNames(cssText) {
const classNames = [];
// 使用正则表达式匹配 .icon- 开头的类名
const regex = /\.(icon-[^:\s{]+)::before/g;
let match;
while ((match = regex.exec(cssText)) !== null) {
classNames.push(match[1]); // match[1] 是捕获的类名（不带点号）
}
return classNames;
}
const res = await fetch("./icon/iconfont.css");
const iconsText = await res.text()
const icons = extractIconClassNames(iconsText);
const grid = document.getElementById('iconGrid');
icons.forEach(iconName => {
const iconItem = document.createElement('div');
iconItem.className = 'icon-item';
iconItem.id = iconName;
const displayName = iconName.replace('icon-', '');
iconItem.innerHTML = `
${displayName}
`;
grid.appendChild(iconItem);
});
// const res = await fetch("./icon/iconfont.json");
// const icons = await res.json()
// const grid = document.getElementById('iconGrid');
// icons.glyphs.forEach(icon => {
// const iconItem = document.createElement('div');
// iconItem.className = 'icon-item';
// iconItem.id = `icon-${icon.font_class}`;
// iconItem.innerHTML = `
//
// ${icon.name}
// `;
// grid.appendChild(iconItem);
// });