You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
I am attempting to customize the sidebar label of only specific items. I have used the api's renderLabel to customize the label text however what I would like to do is replace the document icon next to the label to a SVG i have in my project directory or use Storybook's library icons.
renderLabel only targets the item.name and not the parent elements.
I've been able to force it via css by adding a pseudo-element in .storybook/manager-head.html, but ideally this would be a direct replacement of the document icon itself so I can update the svg fill based on if the item is active or not.
reacted with thumbs up emoji reacted with thumbs down emoji reacted with laugh emoji reacted with hooray emoji reacted with confused emoji reacted with heart emoji reacted with rocket emoji reacted with eyes emoji
-
Summary
I am attempting to customize the sidebar label of only specific items. I have used the api's renderLabel to customize the label text however what I would like to do is replace the document icon next to the label to a SVG i have in my project directory or use Storybook's library icons.
renderLabel
only targets the item.name and not the parent elements.I've been able to force it via css by adding a pseudo-element in .storybook/manager-head.html, but ideally this would be a direct replacement of the document icon itself so I can update the svg fill based on if the item is active or not.
Additional information
No response
Create a reproduction
No response
Beta Was this translation helpful? Give feedback.
All reactions