Skip to content

feat: migrate and prioritize local svg icons over LobeHub - #6282

Closed
hamsa0x7 wants to merge 2 commits into
cheaper-inference:mainfrom
hamsa0x7:feat/local-icons
Closed

hamsa0x7 wants to merge 2 commits into
cheaper-inference:mainfrom
hamsa0x7:feat/local-icons

Conversation

@hamsa0x7

@hamsa0x7 hamsa0x7 commented Jul 5, 2026 •

Copy link
Copy Markdown
Contributor

Summary

Migrates the application to prioritize local SVG icons over fetching from LobeHub or falling back to static PNGs.

Problem

Built-in providers currently rely on third-party remote assets (LobeHub) or pixelated static PNG files. This introduces unnecessary network latency, potential visual degradation on high-res displays, and a point of failure if the external registry is unreachable.

Files changed

  • src/shared/components/ProviderIcon.tsx � Updates the resolution chain to prioritize local SVG assets, while safely preserving custom src overrides (from Add metadata aggregation for combo models in /v1/models #2166) and downstream fallbacks.
  • public/providers/*.svg � Adds 100+ local, crisp SVG icons for built-in providers.
  • public/providers/*.png � Removes obsolete PNG fallbacks for providers that now have SVGs.

Test Plan

  • Unit/Integration tests pass (verified explicit any budget and tracked artifacts CI gates locally).

@hamsa0x7
hamsa0x7 requested a review from diegosouzapw as a code owner July 5, 2026 13:42

@gemini-code-assist gemini-code-assist Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Code Review

This pull request updates various provider icons by adding or modifying SVG files under public/providers/ and updating ProviderIcon.tsx to support an external SVG fallback from thesvg.org. Feedback on these changes highlights that prioritizing external SVGs over local PNGs introduces performance, reliability, and privacy concerns, and suggests prioritizing local assets instead. Additionally, the reviewer notes that using a standard <img> tag for the external SVG will trigger ESLint errors unless an ESLint disable comment is added, and points out that unit tests should be added to tests/ to accompany the production code changes under src/ as required by the repository style guide.

Important

The consumer version of Gemini Code Assist on GitHub is being sunset. Starting June 18, 2026, new organization installations will be blocked, and all code review activity will officially cease on July 17, 2026.
For more details on the timeline and next steps, please review the Help Documentation.

Comment thread src/shared/components/ProviderIcon.tsx Resolved
Comment on lines 151 to +154
const [remoteSrcFailed, setRemoteSrcFailed] = useState(false);
const pngKey = `${normalizedId}:png`;
const svgKey = `${normalizedId}:svg`;
const usePng = !lobeIcon && hasPng && !failedAssets[pngKey];
const useSvg = !lobeIcon && hasSvg && !failedAssets[svgKey] && (!hasPng || failedAssets[pngKey]);
const theSvgKey = `${normalizedId}:thesvg`;

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

medium

According to the Repository Style Guide (Rule 9), tests must always be included when changing production code under src/. Since ProviderIcon.tsx has been modified to support external SVG fallback logic, please ensure that corresponding unit tests are added or updated in the tests/ directory to maintain test coverage.

References
  1. Always include tests when changing production code (src/, open-sse/, electron/, bin/). (link)

Comment on lines +246 to 253
<img
src={`https://thesvg.org/icons/${normalizedId}/default.svg`}
alt={providerId}
width={size}
height={size}
style={{ objectFit: "contain" }}
onError={() => {
setFailedAssets((current) => ({ ...current, [pngKey]: true }));
}}
unoptimized
style={{ objectFit: "contain", flex: "none" }}
onError={() => setFailedAssets((current) => ({ ...current, [theSvgKey]: true }))}
/>

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

medium

Using a standard <img> tag without an ESLint disable comment will trigger the @next/next/no-img-element rule, which can fail the build or CI checks. Since this is an external SVG from a third-party CDN, using <img> is appropriate, but we should add the ESLint disable comment as done elsewhere in this file.

        {/* eslint-disable-next-line @next/next/no-img-element -- external SVG from thesvg.org, not a static/known asset */}
        <img
          src={`https://thesvg.org/icons/${normalizedId}/default.svg`}
          alt={providerId}
          width={size}
          height={size}
          style={{ objectFit: "contain", flex: "none" }}
          onError={() => setFailedAssets((current) => ({ ...current, [theSvgKey]: true }))}
        />

@hamsa0x7
hamsa0x7 force-pushed the feat/local-icons branch 2 times, most recently from ef0eeab to 0d02aa4 Compare July 5, 2026 13:50
@hamsa0x7
hamsa0x7 force-pushed the feat/local-icons branch from 0d02aa4 to 63a6e24 Compare July 5, 2026 13:55
- Adds thesvg.org to the external SVG resolution chain.

- Includes eslint-disable comment for next/image external img.
@hamsa0x7
hamsa0x7 force-pushed the feat/local-icons branch from 3931f51 to e1182f2 Compare July 5, 2026 17:03
@hamsa0x7 hamsa0x7 closed this Jul 6, 2026
@hamsa0x7
hamsa0x7 deleted the feat/local-icons branch July 6, 2026 04:34
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