chore(icons): update spotify icon

[waleedlatif1]

Summary

• update spotify icon

Type of Change

• Bug fix

Testing

Tested manually

Checklist

• Code follows project style guidelines
• Self-reviewed my changes
• Tests added/updated and passing
• No new warnings introduced
• I confirm that I have read and agree to the terms outlined in the Contributor License Agreement (CLA)

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Review	Updated (UTC)
docs	Building	Preview, Comment	Dec 13, 2025 10:11am

[greptile-apps]

Greptile Overview

Greptile Summary

Updated the Spotify icon from a vector SVG to a base64-encoded PNG image across both sim and docs apps.

• Replaced vector path elements with embedded PNG image using base64 encoding
• Alphabetically reorganized icon mapping in icon-mapping.ts for better maintainability
• Moved credential field to top of Spotify block properties for improved UX

Issue Found:

• The viewBox dimensions (100 100 186 186) don't align properly with the width/height attributes (386x386), which creates incorrect positioning and may cause the icon to render improperly at different sizes

Confidence Score: 3/5

• This PR has a logical issue with icon rendering that should be fixed before merging
• Score reflects a critical viewBox/dimension mismatch in the icon implementation that will cause rendering issues. The icon may not display correctly at various sizes due to the viewBox starting at (100, 100) with dimensions 186x186 while the image itself is 386x386. The rest of the changes (alphabetizing and field reordering) are safe.
• Pay close attention to apps/sim/components/icons.tsx and apps/docs/components/icons.tsx - the viewBox dimensions need to be corrected

Important Files Changed

File Analysis

Filename	Score	Overview
apps/sim/components/icons.tsx	3/5	Replaced vector SVG SpotifyIcon with base64-encoded PNG image; viewBox dimensions may cause rendering issues
apps/docs/components/icons.tsx	3/5	Replaced vector SVG SpotifyIcon with base64-encoded PNG image; identical to sim version

Sequence Diagram

sequenceDiagram
    participant Dev as Developer
    participant Icons as Icon Components
    participant Mapping as Icon Mapping
    participant Block as Spotify Block
    
    Dev->>Icons: Update SpotifyIcon (sim)
    Note over Icons: Replace vector SVG with<br/>base64 PNG image
    
    Dev->>Icons: Update SpotifyIcon (docs)
    Note over Icons: Apply same icon change<br/>for consistency
    
    Dev->>Mapping: Reorder icon mapping
    Note over Mapping: Alphabetize entries<br/>for better organization
    
    Dev->>Block: Move credential field
    Note over Block: Reorder properties to<br/>show auth first

Loading

[greptile-apps]

_{4 files reviewed, 1 comment}

_{Edit Code Review Agent Settings | Greptile}

[greptile-apps]

logic: viewBox dimensions don't match width/height. viewBox='100 100 186 186' with width='386' height='386' creates misalignment - the viewBox should typically be 0 0 386 386 or the width/height should match the viewBox dimensions.

Prompt To Fix With AI

This is a comment left during a code review.
Path: apps/sim/components/icons.tsx
Line: 4213:4213

Comment:
**logic:** viewBox dimensions don't match width/height. `viewBox='100 100 186 186'` with `width='386' height='386'` creates misalignment - the viewBox should typically be `0 0 386 386` or the width/height should match the viewBox dimensions.

How can I resolve this? If you propose a fix, please make it concise.