Skip to content

fix: use relative URL for icon sprite to prevent loading failures#12

Merged
bsmitches merged 1 commit intostagingfrom
devin/1767848237-fix-icon-sprite-url
Jan 8, 2026
Merged

fix: use relative URL for icon sprite to prevent loading failures#12
bsmitches merged 1 commit intostagingfrom
devin/1767848237-fix-icon-sprite-url

Conversation

@devin-ai-integration
Copy link
Copy Markdown

@devin-ai-integration devin-ai-integration bot commented Jan 8, 2026

What does this PR do?

Fixes an issue where all button icons throughout the UI were empty/invisible due to the SVG sprite failing to load.

Root cause: The IconSprites component was using an absolute URL based on NEXT_PUBLIC_WEBAPP_URL to load the sprite.svg file. When this environment variable was misconfigured (e.g., pointing to a different IP address than the actual server), the browser couldn't load the sprite, resulting in empty buttons.

Fix: Changed from absolute URL to relative URL (/icons/sprite.svg), which always loads the sprite from the same origin as the app, making it resilient to NEXT_PUBLIC_WEBAPP_URL misconfiguration.

Also fixed pre-existing lint warnings in the file by adding proper type annotations and refactoring the ternary to an if-else function.

Visual Demo

Before (empty buttons):

Before fix

After (icons visible):

After fix

Mandatory Tasks (DO NOT REMOVE)

  • I have self-reviewed the code (A decent size PR without self-review might be rejected).
  • I have updated the developer docs in /docs if this PR makes changes that would require a documentation change. N/A - no documentation changes needed.
  • I confirm automated tests are in place that prove my fix is effective or that my feature works. N/A - existing icon rendering tests cover this; fix was verified on deployed server.

How should this be tested?

  1. Deploy to an environment where NEXT_PUBLIC_WEBAPP_URL is set to a different value than the actual server URL
  2. Navigate to /event-types page
  3. Verify that button icons (external link, copy link, ellipsis menu) are visible on each event type row
  4. Check browser console - there should be no errors loading /icons/sprite.svg

Human Review Checklist

  • Verify the relative URL approach works in all deployment scenarios (Vercel, self-hosted, embeds)
  • Confirm the lint fixes (type annotations, if-else refactor) don't change runtime behavior

Checklist

  • I have read the contributing guide
  • My code follows the style guidelines of this project
  • I have checked if my changes generate no new warnings

Link to Devin run: https://partner-workshops.devinenterprise.com/sessions/8994de7171004c98af6695ee31eef916
Smitches ()

The IconSprites component was using an absolute URL based on NEXT_PUBLIC_WEBAPP_URL
to load the sprite.svg file. If this environment variable was misconfigured (e.g.,
pointing to a different IP address), the icons would fail to load, resulting in
empty buttons throughout the UI.

This change uses a relative URL instead, which will always load the sprite from
the same origin as the app, making it resilient to NEXT_PUBLIC_WEBAPP_URL
misconfiguration.

Also fixed pre-existing lint warnings in the file by adding proper type annotations
and refactoring the ternary to an if-else function.
@devin-ai-integration
Copy link
Copy Markdown
Author

🤖 Devin AI Engineer

I'll be helping with this pull request! Here's what you should know:

✅ I will automatically:

  • Address comments on this PR. Add '(aside)' to your comment to have me ignore it.
  • Look at CI failures and help fix them

Note: I can only respond to comments from users who have write access to this repository.

⚙️ Control Options:

  • Disable automatic comment and CI monitoring

@bsmitches bsmitches merged commit 8c2e38d into staging Jan 8, 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.

1 participant