mirror of
https://codeberg.org/PostERG/xamxam.git
synced 2026-06-25 16:19:19 +02:00
Migrate all <img>-based icons to inline SVG via PHP helper
Replace every <img src="/assets/icons/..."> with <?= icon('name') ?>
across 26 template files. The PHP helper inlines the SVG markup into the
DOM so CSS color cascades naturally through fill="currentColor".
- Add src/icon.php helper: reads SVG file, sets width/height to 1em,
injects aria-hidden, supports optional CSS class
- Fix 12 icon SVGs that had hardcoded fill="#000000" or missing fill attr
- Replace search.svg with Phosphor fill-based magnifying glass
- Add explicit SVG sizes for admin header nav icons (16px/20px)
- Scope public search icon CSS to form[role=search]:not(.header-search-form)
to avoid breaking admin header layout; change stroke to fill
- Remove <img> filter: brightness(0) invert(1) hacks from admin.css
This commit is contained in:
35
app/src/icon.php
Normal file
35
app/src/icon.php
Normal file
@@ -0,0 +1,35 @@
|
||||
<?php
|
||||
|
||||
/**
|
||||
* Inline SVG icon helper.
|
||||
*
|
||||
* Returns the SVG markup for an icon from /assets/icons/{name}.svg.
|
||||
* The SVG is inlined into the DOM so CSS `color` / `fill` cascade naturally.
|
||||
* Width/height are set to 1em by default; override via CSS on the parent.
|
||||
*
|
||||
* Usage: <?= icon('trash') ?>
|
||||
* <?= icon('search', 0, 'header-search-icon') ?>
|
||||
*/
|
||||
function icon(string $name, int $size = 0, string $class = ''): string {
|
||||
$path = APP_ROOT . "/public/assets/icons/{$name}.svg";
|
||||
if (!file_exists($path)) {
|
||||
return "<!-- icon not found: {$name} -->";
|
||||
}
|
||||
$svg = file_get_contents($path);
|
||||
// Normalise width/height to 1em so icons scale with font-size
|
||||
$svg = preg_replace('/\bwidth="[^"]*"/', 'width="1em"', $svg);
|
||||
$svg = preg_replace('/\bheight="[^"]*"/', 'height="1em"', $svg);
|
||||
// Ensure aria-hidden by default (icons are decorative when used via this helper)
|
||||
if (!str_contains($svg, 'aria-hidden')) {
|
||||
$svg = str_replace('<svg', '<svg aria-hidden="true"', $svg);
|
||||
}
|
||||
// Inject CSS class if provided
|
||||
if ($class !== '') {
|
||||
if (str_contains($svg, 'class="')) {
|
||||
$svg = str_replace('class="', 'class="' . $class . ' ', $svg);
|
||||
} else {
|
||||
$svg = str_replace('<svg', '<svg class="' . $class . '"', $svg);
|
||||
}
|
||||
}
|
||||
return $svg;
|
||||
}
|
||||
Reference in New Issue
Block a user