Aliased `lucide-svelte` importing icons directly gives module not found error

[SenneVanderAuwera]

Package

• [ ] lucide
• [ ] lucide-angular
• [ ] lucide-flutter
• [ ] lucide-preact
• [ ] lucide-react
• [ ] lucide-react-native
• [ ] lucide-solid
• [X] lucide-svelte
• [ ] lucide-vue
• [ ] lucide-vue-next
• [ ] Figma plugin
• [ ] source/main
• [ ] other/not relevant

Version

0.445.0

Can you reproduce this in the latest version?

• [X] Yes
• [ ] No

Browser

• [X] Chrome/Chromium
• [ ] Firefox
• [ ] Safari
• [ ] Edge
• [ ] iOS Safari
• [ ] Opera
• [ ] Other/not relevant

Operating system

• [X] Windows
• [ ] Linux
• [ ] macOS
• [ ] ChromeOS
• [ ] iOS
• [ ] Android
• [ ] Other/not relevant

Description

When trying to import an icon directly using the lucide-svelte library, vscode throws the following error:

Cannot find module 'lucide-svelte/icons/alert-circle' or its corresponding type declarations.js(2307)

Steps to reproduce

<script>
    import AlertCircle from "lucide-svelte/icons/alert-circle";
</script>

<AlertCircle color="#ff3e98" />

Checklist

• [X] I have searched if someone has submitted a similar issue before and there weren't any. (Please make sure to also search closed issues, as this issue might already have been resolved.)

[karsa-mistmere]

Hi @SenneVanderAuwera,

The docs are not quite up to date, so there's an old name hiding there. The trouble is, you may only import icons directly when using their canonical names, so it should be:

<script>
    import CircleAlert from "lucide-svelte/icons/circle-alert";
</script>

<CircleAlert color="#ff3e98" />

[SenneVanderAuwera]

Thanks, that solves it.