need help setting up starlight-plugin-icons

[dry terrace]

Pasting my current starlight settings into the Icons({}) causes a lot of errors

@deft juniper ill send you mjs file in your dms

note: in my starlgiht there are like dozens of plugins and integrations

it may or may not be cause why it causes issues

[deft juniper]

okay

[deft juniper]

yea that can happen

[dry terrace]

funny enough it starts with favicon

[deft juniper]

alright, and what is the error exactly

[dry terrace]

when i put my current startlight({}) in the Icons({})

oh wait

i was missing :

@deft juniper sorry to bother

i had starlight({}) instead of starlight: ({})

i feel so stupid smh

btw one more question the uno.config.ts is in the src folder or content folder

just to be sure

[deft juniper]

oh lol
np

[deft juniper]

it should be the project root

[dry terrace]

uhm

so src in my case

its in the same folder as astro.config.mjs

[deft juniper]

yes next to the astro config, this is mine

[dry terrace]

yeah same

[deft juniper]

not sure what folder you have named src but it should work, only the unocss vscode extension checks it anyway to my knowledge

[dry terrace]

wait i dont have it in src

i have it in docs file

yeah all good

hmm

      {
        label: 'Guides',
        items: [
          { icon: 'i-ph:rocket-launch-duotone', label: 'Intro', slug: 'guides/intro' },
        ],
      },

does this follow same logic as default starlight?

i guess i have to single out every file

maybe

[deft juniper]

wdym

[dry terrace]

im trying to understand how to make it work lmao

its been awhile i saw starlight

and trying to figuring out what i even wrote XDD

weird

doesnt seem to work

{ icon: 'material-symbols-light:format-list-bulleted-rounded', slug: 'docs/getting-started/home', label: "Home" },

this should be correct

i installed

npm i -D @iconify-json/material-symbols-light

[deft juniper]

did you do the unocss setup? for astro

https://unocss.dev/integrations/astro

[dry terrace]

yup

i will do it again just to be sure

[deft juniper]

try adding color-red to something and see if it works

i wrote this page which can help debugging: https://docs.rettend.me/starlight-plugin-icons/help/troubleshooting/

[dry terrace]

to something is kinda vague

im trying to use https://icones.js.org/collection/material-symbols-light?s=list&icon=material-symbols-light:lists

[deft juniper]

start by verifying that the safelist is correct
or if the icons have 0 width perhaps
or if unocss creates the icon classes in the output css

[deft juniper]

well that's just a quick check i usually use to verify that unocss works at all

simply this:

<p class="text-red">test</p>

[dry terrace]

Expected a closing tag for <p> (92:1-92:21) before the end of paragraph

seems it doesnt lmao

[deft juniper]

typo sry

well that's a unocss issue then
so you need to fix that first

[dry terrace]

youre correct

i installed it correctly 😭

[dry terrace]

how to know wether its correct or not

[deft juniper]

hm maybe i should create a check command for this, since the setup can be complex

[deft juniper]

• safelist: you should see the icon added to the generated safelist

• unocss: you should see the generated css for the icon

but first get unocss to work at all, if text-red works, you can try using an icon directly on a page:

<span class="i-material-symbols-light:format-list-bulleted-rounded size-8" />

[deft juniper]

btw you need to prefix icon classes with i-

[dry terrace]

  "i-material-icon-theme:document",
  "i-material-icon-theme:go",
  "i-material-icon-theme:javascript",
  "i-material-icon-theme:json",
  "i-material-icon-theme:python",
  "i-material-icon-theme:ruby",
  "i-material-icon-theme:rust",
  "i-material-symbols-light:lists"
]

its there

[dry terrace]

where did you find that

[deft juniper]

i just used search

.i-material-symbols-light\:lists

[dry terrace]

nothing

[dry terrace]

works

well text-red doesnt

[deft juniper]

hm still a unocss config issue then

[dry terrace]

this should be correct right?

[deft juniper]

well yea but that's just filenames

:D

[dry terrace]

😭

in src there are just mdx files and components

what now

@deft juniper i got some news

i moved uno.config.ts into src foldder and the text is red

but the icon is gone

[deft juniper]

uhm

[dry terrace]

im not joking

xd

I deleted uno.config.ts file and the text after restart is still red

maybe theres some bug in your package?

[deft juniper]

the plugin needs a uno config file at the root, where other configs are

i haven't tested what happens if the uno config is placed somewhere else, so there can be issues then

but unocss shouldn't stop working if you place its config there

[dry terrace]

seems it doesnt XD

and still works

ngl im going insane

also it looks like your plugin overrides https://github.com/HiDeoo/starlight-sidebar-topics

maybe thats the issue

[deft juniper]

hm yea

it looks like this plugin has its own sidebar override

so they are incompatible

not sure what to do in this case, i don't really know any solution

[dry terrace]

well tbh i know about one basically uhh

create new sidebar component

and basically combine it?

i did such thing one time with help of someone else for giscus

and other plugin

but im not enough expirienced

for that

[deft juniper]

yea, that's possible

but you need to do that yourself :/

[dry terrace]

exactly

[deft juniper]

good news is that plugin-icons' sidebar is not that complicated

[dry terrace]

from my other project

which is basically

from scratch

there supposed to be an icon which is invisible

wth

[deft juniper]

i had to copy Sidebar.astro and SidebarSublist.astro from starlight, but i simple changed the icon prop's type to string, and changed the icon to an unocss icon:{entry.attrs['data-icon'] && <span class:list={[entry.attrs['data-icon'], 'sidebar-icon']} />}

i had to copy Sidebar.astro and SidebarSublist.astro from starlight, but i simply changed the icon prop's type to string, and added an unocss icon:
{entry.attrs['data-icon'] && <span class:list={[entry.attrs['data-icon'], 'sidebar-icon']} />}

[dry terrace]

but its there

this is pain im not suprised why people in IT takes so much money

[deft juniper]

hm thats good

safelist and unocss output css are correct?

try astro build to get the output css

[dry terrace]

[
  "i-ph:rocket-launch-duotone"
]

how to " unocss output css"

well its not red