Skip to content

Add an SVG sprite for the header's social icons - #43

Merged
paul999 merged 1 commit into
masterfrom
issue-74/social-icon-sprite
Sep 19, 2026
Merged

paul999 merged 1 commit into
masterfrom
issue-74/social-icon-sprite

Conversation

@paul999

@paul999 paul999 commented Sep 19, 2026

Copy link
Copy Markdown
Member

Follow-up to #42 for paul999/phpbb-website-private#74 (WEBSITE-1433).

The header's RSS, Facebook, X and Discord icons are currently drawn as inline SVG in the page markup of all three sites. Cloudflare serves those pages as DYNAMIC, so every page view sends the four paths again (about 1.4 KB gzipped). The same paths are also copied into three repositories.

This PR adds images/icons/social.svg, a sprite with one <symbol> per brand: social-rss, social-facebook, social-x and social-discord. The headers will reference it as

<svg width="12" height="12" aria-hidden="true" focusable="false"><use href="/assets/images/icons/social.svg?v=1#social-x"/></svg>
  • The symbols keep the exact viewBoxes and paths of the current inline icons. I compared a 2x screenshot of the sprite version with the inline version, and they are pixel-identical.
  • The glyphs still fill with currentColor, so the .social-icons tile styles from Style the header's SVG social icons as brand-coloured tiles #42 apply unchanged.
  • /assets/ and all three sites are served from www.phpbb.com, which <use> requires (same origin only).
  • When the sprite changes, the ?v= in the three headers needs bumping.

Nothing references the sprite yet, so merging and deploying this changes nothing on its own.

Merge order

  1. This PR.
  2. composer update phpbb/website-assets on the #74 branches of phpbb-website-private (phpbb/phpbb-website-private#240) and phpbb/website (phpbb/website#236).
  3. Push the <use> markup to those PRs and to phpbb/phpbb3-website#109.

The old site's copy of the assets serves /assets/ in production, forum included. Deploy it before or together with the header markup, or the tiles render empty.

🤖 Generated with Claude Code

The page headers of the Symfony site, the forum and the old site draw
their RSS, Facebook, X and Discord icons as inline SVG
(paul999/phpbb-website-private#74). Pages are not cached by the CDN,
so every page view carries the four paths again, and the same paths
are copied into three repositories.

Move the glyphs into images/icons/social.svg as one <symbol> per
brand, so the headers can reference them with <use> and the sprite is
cached like the other assets. The symbols keep the viewBoxes the
inline icons used, so the rendering is unchanged, and they still fill
with currentColor for the .social-icons tile styles.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Copilot AI lite review requested due to automatic review settings September 19, 2026 15:29

Copilot AI left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Copilot wasn't able to review any files in this pull request.


💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.

@paul999
paul999 merged commit 4f58934 into master Sep 19, 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