Get help on Discord

Pass props to Sanity desk structure icon component

8 replies
Last updated: Feb 4, 2022
Wondering if there is a trick to pass props to the desk-structure ICON?

import {
  File
} from "phosphor-react";

S.listItem()
    .title("Pages")
    .id("pages")
    .child(S.documentTypeList("page").title("Pages overview"))
    .schemaType("page")
    .icon(File),
Want something like this:


S.listItem()
    .title("Pages")
    .id("pages")
    .child(S.documentTypeList("page").title("Pages overview"))
    .schemaType("page")
    .icon(<File color="#FF0000"/>),
Is there a trick to do this
😄?
AI Update

Looking at the Structure Builder API, you can pass props to icons by wrapping them in a function component! The .icon() method accepts a React component, so instead of passing the component directly, you can pass a function that returns the component with your desired props.

Here's how to do it:

S.listItem()
  .title("Pages")
  .id("pages")
  .child(S.documentTypeList("page").title("Pages overview"))
  .schemaType("page")
  .icon(() => <File color="#FF0000" />)

The key is wrapping your icon component in an arrow function. This way, you're passing a component (function) to .icon() that returns your File icon with custom props.

You can also use a regular function if you prefer:

.icon(function() { return <File color="#FF0000" /> })

This pattern works because the Structure Builder API documentation specifies that the .icon() method accepts a "React component" as its parameter. When you wrap your JSX in a function, you're creating a functional React component that renders your icon with the custom props.

This same approach works for other Structure Builder methods that accept icons, like documentListItem(), menuItem(), and view icons in document nodes. So you can customize colors, sizes, weights, or any other props your icon library supports! 😄

Show original thread
8 replies
We do this pretty regularly in our internal tool Hyperdrive. For example:
S.listItem()
 .title('My Community Tracker Filters')
 .icon(() => <Tile color='#d0f4dc'><FilterIcon /></Tile>)
 .child(...)
user M
You are the bomb 😄
no you
We do this pretty regularly in our internal tool Hyperdrive. For example:
S.listItem()
 .title('My Community Tracker Filters')
 .icon(() => <Tile color='#d0f4dc'><FilterIcon /></Tile>)
 .child(...)
user M
Works good 😄
user M
Works good 😄
Fun colors! I was about to say "I didn't know you could return components" but of course that's what the React icons are 😃
user S
Yeah for our company I am using the same colors for the front and back end 😊👍🙌

Sanity – Build the way you think, not the way your CMS thinks

Sanity is the developer-first content operating system that gives you complete control. Schema-as-code, GROQ queries, and real-time APIs mean no more workarounds or waiting for deployments. Free to start, scale as you grow.

Get started for freeExplore the demo

Was this answer helpful?