When using SolidStart, my icons look mangled on first load

[kindred imp]

On first render, my icons look mangled.

import { HiOutlineHome, HiOutlineBriefcase, HiOutlineFolder, HiOutlineNewspaper, HiOutlineChat, HiOutlineFire } from "solid-icons/hi";
const options = [
    {
        icon: <HiOutlineHome size={24} />,
    },
    {
        icon: <HiOutlineBriefcase size={24}/>,
    },
    {
        icon: <HiOutlineFolder size={24}/>,
    },
    {
        icon: <HiOutlineFire size={24}/>,
    },
    {
        icon: <HiOutlineNewspaper size={24}/>,
    },
]

function NavOption(props) {
    return (   
        <A href="#">
            {props.icon}
        </A>                   
    )
}

export default function NavBar() {
    return (      
        <nav class="mt-8 flex-1 space-y-1 px-2" aria-label="Sidebar">
              <For each={options}>
                      {(option) => 
                            <NavOption icon={option.icon} />
                       }
               </For>
         </nav>
         ...
     )
}

When using SolidStart, my icons look mangled on first load

[kindred imp]

It has something to do with the <A> tags

[worthy quest]

I've seen similar before - but it was more related to css and the svg structure rather than anything to do with solid (vaguely recall something to do with fill). Curious if you get the same effect with icons from some other sets?

[kindred imp]

Oh good idea. I'll try and post my results

[mint rapids]

hello- you might interested in solid-heroicons. it worked better than solid-icons for me (and it was out of date)

[kindred imp]

It's a little frustrating to find something usable outside the Heroicons library. I looked in Bootstrap and FontAwesome and solid-icons doesn't have any of their outline icons. After finding some outlines in Ant Design, I confirmed that it does seem to be an issue with solid-icons/hi. Thanks for your help!

[kindred imp]

Yeah you were right...the SVG paths from solid-icons/hi don't even align with Heroicons. My only complaint with solid-heroicons is that you need to import Icon as well as the SVG path you want to render. I feel like that could be abstracted away and only require one import for the icon you want.

Well, we have confirmed this is not a Solid, SolidStart or even SSR issue. solid-icons/hi is simply out of date. Thank you all!

Now...how do I close this ticket...hmm...

[mint rapids]

I disagree, it's easier for you to create a component that accepts an icon prop if you don't have to accept an entire component instead, you have far more control of how of rendering the icon this way

[kindred imp]

That's a very good point actually