Skip to content

Centralize inline SVGs as Django template includes#387

Closed
C4ptainCrunch wants to merge 4 commits into
mainfrom
claude/centralize-svg-files-wYfmd
Closed

Centralize inline SVGs as Django template includes#387
C4ptainCrunch wants to merge 4 commits into
mainfrom
claude/centralize-svg-files-wYfmd

Conversation

@C4ptainCrunch

@C4ptainCrunch C4ptainCrunch commented May 6, 2026

Copy link
Copy Markdown
Contributor

Summary

Replaces all 65 inline SVGs spread across 14 templates with reusable Django template includes stored in www/templates/icons/. Net: 57 files changed, 234 insertions, 366 deletions.

  • 42 new icon files in www/templates/icons/bi-*.html, each parameterised with size, class, style, fill, title
  • Zero inline SVGs remain in any template outside the icons directory
  • CLAUDE.md updated with the icon pattern and parameter documentation

Icon include syntax

{% include "icons/bi-download.html" %}
{% include "icons/bi-download.html" with size=20 %}
{% include "icons/bi-star-fill.html" with class="text-warning hover-spin" %}
{% include "icons/bi-exclamation-triangle-fill.html" with size=22 style="color: #ef4444;" %}
{% include "icons/bi-check-circle.html" with fill="green" %}
{% include "icons/bi-patch-check-fill.html" with class="text-primary" title="Staff pick" %}

Visual regression — before vs after

Screenshots taken with Rodney (Chromium headless). Before = commit 6f649c6 (inline SVGs). After = this branch.

Course page — 13 icons (archive-fill, file-earmark-plus, star, funnel, eye-slash, patch-check, pencil, download, …)

Before After
before-course after-course

Document viewer — 11 icons (arrow-left, staff-pick badge, 2× download, pencil, box-arrow-up, thumbs-up, thumbs-down, flag, …)

Before After
before-viewer after-viewer

Upload page — 12 icons (check-circle fill="green", 7 file-type icons, cloud-arrow-up size=32, cloud-upload, …)

Before After
before-upload after-upload

Moderation dashboard — people-fill icon in header button

Before After
before-mod-home after-mod-home

Moderators management — exclamation-triangle-fill warning icon

Before After
before-manage-mods after-manage-mods

Representative request (rejected state) — style="color: #ef4444;" and style="color: #6b7280;" inline-hex-color icons

After (rejection box — only state that shows these icons)
after-rep-request-rejected

All icon parameters verified working: size, class, style, fill, title. Zero visual regressions across all 14 modified templates.

https://claude.ai/code/session_01UWj2RmH7gTNiyvr2C5fgy9

claude and others added 4 commits May 5, 2026 21:18
All 65 inline SVGs across 14 templates are replaced with
`{% include "icons/bi-<name>.html" %}` calls. The 42 icon files
live in www/templates/icons/ and accept size, class, style, fill,
and title parameters, keeping colour/size variants without duplication.

https://claude.ai/code/session_01UWj2RmH7gTNiyvr2C5fgy9
Before/after screenshots captured with Rodney (Chromium headless)
comparing commit 6f649c6 (inline SVGs) vs 7419b9e (centralized includes).

https://claude.ai/code/session_01UWj2RmH7gTNiyvr2C5fgy9
@C4ptainCrunch C4ptainCrunch changed the title Refactor: Extract inline SVG icons to reusable template includes Centralize inline SVGs as Django template includes May 6, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants