How do I setup icon files to be imported by an index.js file

[FranklinP44]

Disclaimer: I'm very new to this.

In the examples, there are import statements that read:

import { Icons } from "$lib/components/docs/index.js":

I assume I need to download all the icons and put them in a components/docs folder, but after that, how do I set up the index.js file that's being referenced?

[shyakadavis]

Hey, @FranklinP44

It's really simple; they basically do this: https://github.com/huntabyte/shadcn-svelte/blob/main/apps/www/src/lib/components/docs/icons/index.ts

And then when using, you just do:

<Icons.close aria-hidden="true" class="size-5" />

[FranklinP44]

Wow, thanks for the quick help! I'll give this a try.

[FranklinP44]

I'm following up again with a thank you. I was able to get things working with your instruction. I updated the paths and most of them just worked.

There are a few in that index file that were a little different. Rather than looking in the lucide-svelte/icons folder:
import Pizza from "lucide-svelte/icons/pizza";

They were referencing a .svelte file from somewhere else:
import Google from "./google.svelte";

The lucide-svelte/icons folder had icons for some of them, so I just updated the path.

Others though, like Google, didn't exist anywhere in my project, so I commented them out for now. I'm guessing those are icons that weren't brought in via the "pnpm install lucide-svelte" and that I'll have to find another source for those if/when I need to use them.

[shyakadavis]

Oh, yeah. Lucide stopped working on brand icons like google/twitter... so you have to bring those yourself. There are many ways, like a pure .svg imported as an asset, or doing like they did in this repo, as a Svelte component (see: https://github.com/huntabyte/shadcn-svelte/tree/main/apps/www/src/lib/components/docs/icons)

Just be sure to include only the icons that you actually need. Otherwise, it'll slow up your dev server when doing some optimization stuff.

Cheers.

[FranklinP44]

You're the GOAT!!