[ FEATURE ] Automate Lucide Icon additions

[stephendpmurphy]

Is your feature request related to a problem? Please describe. To remove a bit of the leg work of adding a new icon it would nice if part of the CLI was essentially a helper that takes the Icon name and creates the necessary lib/icons/*.ts file with the wrapped export.

Describe the solution you'd like Add a new icon command alongside add which takes Lucid icon names as an argument and creates the necessary .ts file.

Describe alternatives you've considered Currently using a script like this to automate the creation

#!/bin/bash

if [ -z "$1" ]; then
  echo "Usage: addIcon.sh <iconName>"
  exit 1
fi

iconName=$1

# Create the new icon file under `lib/icons`
iconPath="src/lib/icons/${iconName}.ts"
touch $iconPath

# Write the icon content
echo "import {${iconName}} from 'lucide-react-native';" >> $iconPath
echo "import {iconWithClassName} from './iconWithClassName';" >> $iconPath
echo "iconWithClassName(${iconName});" >> $iconPath
echo "export {${iconName}};" >> $iconPath

Additional context I've always been interested in creating a node based CLI script and would be happy to tackle this addition if that would be OK.

[trevorpfiz]

This would be great! I am also having some troubles with auto imports from the icon exports, have you had any issues with that?

[RajeshPandey057]

Check this out https://github.com/mrzachnugent/react-native-reusables/issues/198, replace lucide with iconify and only one export needed. Iconify includes lucide and so much more https://icon-sets.iconify.design/

[mrzachnugent]

I am open to this. It will need to be another command than "add" since there are some conflicts between the components and the lucide-icon names.

[helix-77]

another suggestion: instead of creating separate files for each icons, create a single icons.tsx and increment the icons there. For example:

import {
  Home,
  Library,
  UserPlus,
  Layers,
  ListPlus,
} from 'lucide-react-native';
import { iconWithClassName } from './iconWithClassName';

iconWithClassName(Home);
iconWithClassName(Library);
iconWithClassName(UserPlus);
iconWithClassName(Layers);
iconWithClassName(ListPlus);

export {
  Home,
  Library,
  UserPlus,
  Layers,
  ListPlus,
};

after that just import { Home, Layers} from '../../lib/icons/icons';

This way the codebase will remain neat.

[mrzachnugent]

@helix-77 That's how it was at first, the problem I faced was with the CLI when adding icons. It would need to parse the file to see if the icon is already there, add text in 3 places, and if the user manually changed something it could stop working so it was easier to add a file for each icon.

React-native-reusables is meant as a quick start for your projects and it is encouraged that you make any changes you need. So, by all means, modify your the icons in your codebase to look like your suggestion.

[RajeshPandey057]

We can maybe utilise component.json here by adding an 'icons' field and then on each run we can just check that key and regenerate whole file without needing to parse it.

[stephendpmurphy]

I am open to this. It will need to be another command than "add" since there are some conflicts between the components and the lucide-icon names.

sorry for falling off the deep end @mrzachnugent. I'm still interested in tackling this and I'll start working something up.