AI Keeps Making Mistakes When Using Lucide Icons in Astro

I recently stumbled upon a really cool open-source static site project on GitHub. Once built, the whole site can be deployed directly to Cloudflare Pages — no backend needed. Super handy.

But while reading through the source, I spotted two issues that stood out right away:

1. Even though the project has separate pages for index, about, and contact us, most of the core logic still lives inside the index page. The content is generated dynamically in the browser with JavaScript, which is terrible for SEO.

2. The author didn’t plan for multilingual support from the start. Some text is hardcoded in HTML, some lives in JSON configs, and some is generated in JS. Translating or maintaining that mess is just painful.

To fix these, I set a few clear goals:

1. Reuse as much of the existing JS functionality as possible.

2. Move all text output into JSON files for easier management.

3. Split major features into separate pages — static wherever possible, no more JS-built DOMs.

4. Generate localized versions under folders like en/ and zh/ for better maintenance.

With that in mind, I decided to rebuild the project using Astro for static rendering.
I thought it’d be a quick job — after all, AI makes code refactoring so much easier these days, right?
Turns out, it was the AI that caused me to waste an entire afternoon fixing things.

The original project used the Lucide icon library, and since I wanted to stay consistent, I kept using Lucide in the Astro version too.

Lucide’s official docs include a section specifically for Astro: Lucide Astro Guide .

When you need to render icons dynamically, the docs show this clean example:

Create a component called LucideIcon.astro

---
import { icons, type IconProps } from '@lucide/astro';

interface Props extends IconProps {
  name: keyof typeof icons;
}

const { name, ...restProps } = Astro.props;
const Icon = icons[name];
---

<Icon {...restProps} />

Then use it in a page component, for example Page.astro

---
import LucideIcon from './LucideIcon.astro';
---

<LucideIcon name="RulerDimensionLine" />

Important

As the docs note, the name prop must be in PascalCase — each word capitalized.

Pretty straightforward, right? Except that every AI assistant I tried — Google Gemini 2.5 Pro, GPT-5, and a few others — kept insisting that the icons[name] value should be lowercase and hyphenated instead.

Whenever I asked AI to “fix” my code in VS Code, it happily rewrote it like this:

---
import { icons, type IconProps } from '@lucide/astro';

interface Props extends IconProps {
  name: keyof typeof icons;
}

const { name: camelCaseName, ...restProps } = Astro.props;

const kebabCaseName = camelCaseName.replace(/[A-Z]/g, (letter) => `-${letter.toLowerCase()}`);

const Icon = icons[kebabCaseName as keyof typeof icons];
---

<Icon {...restProps} />

Warning

So instead of name=“RulerDimensionLine”, it changed it to name=“ruler-dimension-line” — which obviously broke everything.

I have no idea why the AI was so confident about this. Maybe some outdated Lucide version once used lowercase names, or maybe the model just learned it from bad examples floating around online. Either way, it stuck to that belief like gospel — and I spent hours proving it wrong.