feat(wrapper): add missing SVGIcons from Spotify's current UI

[tmchow]

Summary

Adds 22 new icons to Spicetify.SVGIcons extracted from Spotify's current DOM (v1.2.86). This was a PITA but here we are!

Icons added

Context menu: addToPlaylist, addToQueue, share, goToArtist, goToAlbum, credits, radio, excludeTaste, openDesktop

Navigation: whatsNew, friendActivity, create, collapseLibrary, expandLibrary

Playback: skipBack, skipForward, smartShuffle, volumeHigh, nowPlaying

UI: connectDevice, miniplayer, enterFullScreen, heartAdd

How icons were extracted

SVG path data was extracted directly from Spotify Web Player's live DOM by inspecting rendered <svg> elements across the homepage, playlist view, and track context menu. Only 16x16 viewBox icons were included (matching the existing SVGIcons format).

Notes

• Kept the PR focused on the most visible/requested icons rather than trying to add everything. PR feat(wrapper): add unmapped svgicons to "misc" key #2654 attempted a complete icon dump and was abandoned due to scope.
• All existing icons are unchanged.
• Icon key names follow the existing camelCase convention.

Closes #2648

Summary by CodeRabbit

• New Features
  • Expanded the app icon set with 23 new icons covering playlist & queue actions, playback controls (skip, back, volume), device/connectivity, mini-player/now playing, sharing, credits, smart shuffle, and UI states such as expand/collapse and full-screen.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: db637278-148b-407a-9c42-d67e8bf53de3

📥 Commits

Reviewing files that changed from the base of the PR and between f556e82 and 98fda24.

📒 Files selected for processing (1)

• jsHelper/spicetifyWrapper.js

✅ Files skipped from review due to trivial changes (1)

• jsHelper/spicetifyWrapper.js

---

📝 Walkthrough

Walkthrough

Extended Spicetify's SVG icon set and corresponding TypeScript declarations by adding 23 new icon identifiers mapped to SVG markup; no behavioral, control-flow, or removal changes.

Changes

Cohort / File(s)	Summary
SVG Icon Definitions jsHelper/spicetifyWrapper.js	Added 23 new entries to Spicetify.SVGIcons (e.g., addToPlaylist, addToQueue, connectDevice, share, skipBack, skipForward, nowPlaying, whatsNew) containing SVG path markup.
Type Declarations globals.d.ts	Updated Spicetify.Icon string-literal union to include the 23 new icon identifiers added to Spicetify.SVGIcons.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Suggested reviewers

• rxri

Poem

🐰
I hopped through code with glee tonight,
New icons shining, crisp and bright,
Playlists, queues, a share or two,
Tiny paths that sparkle true,
I nibble bugs and hop from sight.

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately summarizes the main change: adding missing SVG icons to the Spicetify wrapper from current Spotify UI.
Linked Issues check	✅ Passed	The PR successfully adds 22 new SVG icons to Spicetify.SVGIcons with consistent camelCase naming and 16x16 viewBox sizing, directly addressing issue #2648's requirement to add missing icons from newer Spotify builds.
Out of Scope Changes check	✅ Passed	All changes are in-scope: extending SVGIcons in spicetifyWrapper.js and updating the Spicetify.Icon type union in globals.d.ts, both directly supporting the objective of adding missing icons.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 2

🧹 Nitpick comments (1)

jsHelper/spicetifyWrapper.js (1)

1934-1943: Optional: deduplicate identical SVG payload for addToPlaylist and create

Line 1935 and Line 1943 contain the same SVG path. Consider extracting a shared constant to avoid duplicate literal maintenance.

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@jsHelper/spicetifyWrapper.js` around lines 1934 - 1943, The SVG path literal
for addToPlaylist and create is duplicated; define a single constant (e.g.,
ICON_ADD_TO_PLAYLIST_PATH or ICON_ADD_CREATE) near the other icon definitions
and replace the two duplicated string literals in the object entries
addToPlaylist and create with a reference to that constant so both keys reuse
the same value and avoid maintenance duplication.

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@jsHelper/spicetifyWrapper.js`:
- Around line 1934-1979: The file jsHelper/spicetifyWrapper.js failed Biome
formatting (CI blocked); run the Biome/formatter on this file (e.g., biome fmt
or your project's configured formatter) to reformat the code including the large
icon object entries like addToPlaylist, addToQueue, collapseLibrary,
connectDevice, etc., then stage and commit the updated
jsHelper/spicetifyWrapper.js so CI can proceed.
- Around line 1934-1979: The TypeScript typing for Spicetify.SVGIcons is too
narrow (currently Record<Icon, string>) and the Icon union/type in globals.d.ts
is missing the newly exported keys (e.g., addToPlaylist, addToQueue,
collapseLibrary, connectDevice, create, credits, enterFullScreen, excludeTaste,
expandLibrary, friendActivity, goToAlbum, goToArtist, heartAdd, miniplayer,
nowPlaying, openDesktop, radio, share, skipBack, skipForward, smartShuffle,
volumeHigh, whatsNew), causing type errors; fix by updating globals.d.ts: either
add these new icon names to the Icon union/type or change Spicetify.SVGIcons
from Record<Icon, string> to a broader type (e.g., Record<string, string> or an
interface with an index signature) so TypeScript consumers can reference the new
keys without errors.

---

Nitpick comments:
In `@jsHelper/spicetifyWrapper.js`:
- Around line 1934-1943: The SVG path literal for addToPlaylist and create is
duplicated; define a single constant (e.g., ICON_ADD_TO_PLAYLIST_PATH or
ICON_ADD_CREATE) near the other icon definitions and replace the two duplicated
string literals in the object entries addToPlaylist and create with a reference
to that constant so both keys reuse the same value and avoid maintenance
duplication.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 81363594-50ab-43e5-bfed-ca95c29124e9

📥 Commits

Reviewing files that changed from the base of the PR and between 1c77973 and d02d16e.

📒 Files selected for processing (1)

• jsHelper/spicetifyWrapper.js