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:
Pontoporeia
2026-06-21 17:23:37 +02:00
parent b1774e6e97
commit dfde88eaa5
42 changed files with 166 additions and 108 deletions

View File

@@ -38,7 +38,7 @@
<td>
<a href="/admin/contenus-edit.php?slug=<?= urlencode($p['slug']) ?>"
class="admin-icon-btn admin-icon-btn--edit" title="Éditer">
<img src="/assets/icons/pencil-note.svg" width="32" height="32" alt="" aria-hidden="true">
<?= icon('pencil-note') ?>
</a>
</td>
</tr>
@@ -309,10 +309,10 @@ function languesStartRename(id) {
+ '<input type="hidden" name="language_id" value="' + id + '">'
+ '<input type="text" name="new_name" value="' + cell.getAttribute('data-name') + '" required class="admin-input--inline">'
+ '<button type="submit" class="admin-icon-btn admin-icon-btn--edit" title="Valider">'
+ '<img src="/assets/icons/check-circle.svg" width="32" height="32" alt="" aria-hidden="true">'
+ '<?= icon('check-circle') ?>'
+ '</button>'
+ '<button type="button" class="admin-icon-btn admin-icon-btn--delete" onclick="languesCancelRename(' + id + ')" title="Annuler">'
+ '<img src="/assets/icons/x-close.svg" width="32" height="32" alt="" aria-hidden="true">'
+ '<?= icon('x-close') ?>'
+ '</button></form>';
cell.querySelector('input').focus();
}
@@ -321,7 +321,7 @@ function languesCancelRename(id) {
var cell = document.getElementById('lang-name-' + id);
cell.innerHTML = '<span class="tag-name-cell">' + cell.getAttribute('data-name') + '</span>'
+ '<button type="button" class="admin-icon-btn admin-icon-btn--edit" title="Renommer" onclick="languesStartRename(' + id + ')">'
+ '<img src="/assets/icons/pencil-note.svg" width="32" height="32" alt="" aria-hidden="true">'
+ '<?= icon('pencil-note') ?>'
+ '</button>';
}
@@ -488,10 +488,10 @@ function motsclesStartRename(id) {
+ '<input type="hidden" name="tag_id" value="' + id + '">'
+ '<input type="text" name="new_name" value="' + cell.getAttribute('data-name') + '" required class="admin-input--inline">'
+ '<button type="submit" class="admin-icon-btn admin-icon-btn--edit" title="Valider">'
+ '<img src="/assets/icons/check-circle.svg" width="32" height="32" alt="" aria-hidden="true">'
+ '<?= icon('check-circle') ?>'
+ '</button>'
+ '<button type="button" class="admin-icon-btn admin-icon-btn--delete" onclick="motsclesCancelRename(' + id + ')" title="Annuler">'
+ '<img src="/assets/icons/x-close.svg" width="32" height="32" alt="" aria-hidden="true">'
+ '<?= icon('x-close') ?>'
+ '</button></form>';
cell.querySelector('input').focus();
}
@@ -500,7 +500,7 @@ function motsclesCancelRename(id) {
var cell = document.getElementById('motscles-name-' + id);
cell.innerHTML = '<span class="tag-name-cell">' + cell.getAttribute('data-name') + '</span>'
+ '<button type="button" class="admin-icon-btn admin-icon-btn--edit" title="Renommer" onclick="motsclesStartRename(' + id + ')">'
+ '<img src="/assets/icons/pencil-note.svg" width="32" height="32" alt="" aria-hidden="true">'
+ '<?= icon('pencil-note') ?>'
+ '</button>';
}