SP-Picker Menu Items Icons

Photoshop UXP Plugin API
1

Using the SP-Picker has anyone managed to use Icons in the drop down list

2

Didn’t bother to style properly (probably you don’t even need the <div class="icon">), but here you go

<sp-picker>
  <sp-menu slot="options">
    <sp-menu-item value="">
      <div style="display: flex; flex-direction: row;">
        <div class="icon">
          <svg xmlns="http://www.w3.org/2000/svg" height="18" viewBox="0 0 18 18" width="18">{ALL SVG STUFF}</svg>
        </div>
        Layers
      </div>
    </sp-menu-item>
    <sp-menu-item value="" selected="true">
      <!-- ... -->
    </sp-menu-item>
  </sp-menu>
</sp-picker>

image
image574×263 8.14 KB

3

@Karmalakas Thank You for the code appreciated.
This brings me to something else which has been on my mind.

slot="options"

What does this slot do, I see it a-lot in code examples

4

Most likely some Spectrum specific stuff :man_shrugging:

If you check sp-dropdown UXP docs, you’ll find it in the example, but I personally couldn’t make sp-dropdown work in UXP, so had to improvise and started experimenting by mixing Spectrum Web Components with Spectrum UXP and sp-picker (which is not even documented under UXP) worked just fine.

So basically I have no certain answer :slightly_smiling_face: I assume it’s similar to slot="icon" - like defining as a placeholder or something. I mean, probably there’s some placeholder inside sp- components and defining it as an attribute, puts that element into that placeholder. I’m purely speculating here :smiley: