PHP实现Bootstrap Icons图标HTML重构与分类优化解析

26 0 0

PHP实现Bootstrap Icons图标HTML重构与分类优化解析

在Web开发中，我们常常需要将图标库中的源文件进行解析、分类并重新输出为可浏览的结构化HTML页面。本文将解析一段用PHP实现的Bootstrap字体图标大全页面转换脚本，它的核心目标是读取原始HTML片段（如图标列表），提取图标名称、SVG路径、分类和标签，并输出为标准HTML结构，适合展示和检索。

<?php
// 读取原始文件
$content = file_get_contents('5.php');

// 添加新的样式和头部
$newHeader = '<?php header("Content-Type: text/html; charset=utf-8"); ?>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bootstrap Icons 图标库</title>
</head>
<body>
    <div class="card">
        <div class="card-body">
            <span class="badge">!</span>
            <span class="tips">按<code>Ctrl+F</code>搜索图标</span>
        </div>
        <div class="card-body">
            <div class="texts">
                Bootstrap Icons 是一个免费、高质量的开源图标库，包含超过1,800个图标。这些图标可以在任何项目中使用，完全支持SVG格式。
            </div>';

// 提取所有图标项
preg_match_all('/<li.*?<\/li>/s', $content, $matches);
$icons = $matches[0];

// 开始新的列表
$newContent = $newHeader . "\n<ul class=\"list\">\n";

// 处理每个图标
foreach ($icons as $icon) {
    // 提取图标名称
    preg_match('/text-center pt-1">(.*?)<\/div>/', $icon, $nameMatch);
    $iconName = $nameMatch[1];
    
    // 提取SVG路径
    preg_match('/xlink:href="(.*?)"/', $icon, $svgMatch);
    $svgPath = $svgMatch[1];
    
    // 提取分类和标签
    preg_match('/data-categories="(.*?)"/', $icon, $catMatch);
    $categories = $catMatch[1];
    preg_match('/data-tags="(.*?)"/', $icon, $tagMatch);
    $tags = $tagMatch[1];
    
    // 创建新的图标HTML
    $newIcon = "    <li class=\"col\" data-categories=\"$categories\" data-tags=\"$tags\">
        <div class=\"bg-light text-center\">
            <a class=\"text-dark text-decoration-none\" href=\"/icons/$iconName/\">
                <svg class=\"bi\" fill=\"currentColor\" height=\"1em\" width=\"1em\">
                    <use xlink:href=\"$svgPath\"></use>
                </svg>
            </a>
        </div>
        <div class=\"name text-center\">$iconName</div>
    </li>\n";
    
    $newContent .= $newIcon;
}

// 添加结束标签
$newContent .= "</ul>\n        </div>\n    </div>\n</body>\n</html>";

// 保存新文件
file_put_contents('5_converted.php', $newContent);

echo "转换完成！请检查 5_converted.php 文件。";
?>

一、功能概述

本PHP脚本的主要功能是：

读取原始HTML文件 5.php
提取所有图标项（<li>标签）
使用正则表达式提取图标名称、SVG路径、分类与标签
重新构建带有Bootstrap样式的新HTML结构
生成新页面并保存为 5_converted.php

二、核心逻辑解析


// 读取原始文件
$content = file_get_contents('5.php');

这段代码读取原始图标HTML内容。


// 正则匹配所有图标项
preg_match_all('/<li.*?<\/li>/s', $content, $matches);

提取所有图标的 <li> 标签项，采用非贪婪匹配方式。


// 依次提取图标名称、SVG路径、分类、标签
preg_match('/text-center pt-1">(.*?)<\/div>/', $icon, $nameMatch);
preg_match('/xlink:href="(.*?)"/', $icon, $svgMatch);
preg_match('/data-categories="(.*?)"/', $icon, $catMatch);
preg_match('/data-tags="(.*?)"/', $icon, $tagMatch);

每项图标数据中，均使用正则匹配方式提取对应信息，并赋值。


// 输出新结构HTML
$newIcon = "<li class='col' data-categories='...'>...</li>";

将提取的数据嵌入到新的HTML结构中，带有语义化class、data属性和SVG图标。

三、输出结构优化

输出文件使用了如下结构包装，具备清晰的卡片布局与响应式图标展示：


<div class="card">
  <div class="card-body">
    <ul class="list">
      <li class="col" data-categories="..." data-tags="...">
        <svg></svg>
        <div class="name">图标名称</div>
      </li>
    </ul>
  </div>
</div>