Creating new icons triggers 'unique "key" prop' error

[mathis-girault]

Package

• lucide-react

Version

0.378.0

Can you reproduce this in the latest version?

• Yes

Browser

• Firefox
• Edge

Operating system

• Windows

Description

When creating a custom Icon component, with createLucideIcon function, and then using the new icon somewhere in a list, the following error appears on the console:

Warning: Each child in a list should have a unique "key" prop.

This bug occured within a 'big' project so I tried to trigger it on a just created project: same issue.
Besides creating a react app and installing lucide-react, I simply wrote this code:

import './App.css';
import { createLucideIcon } from 'lucide-react';

const MyIconNode = [
  ['path', { d: 'M8 2v4' }],
]

const MyIcon = createLucideIcon('MyIcon', MyIconNode)

function App() {
  return (
    <div className="App">
      {[1, 2, 3].map((number) => (
        <div key={number}>
          <MyIcon />
        </div>
      ))}
    </div>
  );
}

export default App;

I am not sure what is causing this and hope I didn't miss an obvious error.

Steps to reproduce

1. Create a react app (tried both js and ts) and install lucide-react
2. Create a new icon with createLucideIcon (with a name a an icon node)
3. Render the newly created icon inside a map method for exemple

For step 3, created icon cannot support a key prop, and putting the icon inside a div that has a key doesn't solve the issue.

Checklist

• 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.)

[ericfennis]

You can easily fix this by adding a key prop in the iconNode:

const MyIconNode = [
  ['path', { d: 'M8 2v4', key: 'path1' }],
]

[mathis-girault]

Awesome, this works perfectly.

I'll close the issue as this solves it entirely (it could maybe be added to the documentation, I was not able to find this information on my own).

[jguddas]

Awesome, this works perfectly.

I'll close the issue as this solves it entirely (it could maybe be added to the documentation, I was not able to find this information on my own).

Be the change you want to see in the world 😉