SVGIcons
Spicetify has a predefined set of SVG icons that are used by Spotify throughout the client. These are strings of SVG innerHTML
that are used to create <svg>
elements.
const SVGIcons = Record<SVGIcon, string>;
Property | Type | Description |
---|---|---|
key | SVGIcon | SVG icon name. |
Usage
You can use these icons to create custom menu items or other custom components.
In vanilla JavaScript, you can create an <svg>
element and set its innerHTML
to the SVG icon string.
const icon = document.createElement("svg");
icon.innerHTML = Spicetify.SVGIcons["play"];
In React, you can use the dangerouslySetInnerHTML
prop to set the SVG icon string as the inner HTML of the <svg>
element.
const icon = <svg dangerouslySetInnerHTML={{ __html: Spicetify.SVGIcons["play"] }} />;
In Spicetify's own methods, you can simply pass an SVGIcon
to the icon
parameter.
new Spicetify.ContextMenu.Item(
name: "My Custom Item".
onClick: () => Spicetify.showNotification("Hello World!"),
shouldAdd: () => true,
icon: "play",
disabled: false,
)