react-lucide-icon-picker

React Lucide Icon Picker

This is a React component that allows you to pick Lucide icons.

Installation

To install the React Lucide Icon Picker, you can use npm or yarn:

npm install react-lucide-icon-picker

Usage

To use the React Lucide Icon Picker, simply import it and use it in your React application:

import 'react-lucide-icon-picker/style.css'
import { ReactLucideIconPicker } from 'react-lucide-icon-picker'

function App() {
  return (
    <div>
      <h1>Choose an Icon</h1>
      <ReactLucideIconPicker />
    </div>
  )
}

Importing Components Separately

You can import components separately from the React Lucide Icon Picker. When doing so, ensure that the components are wrapped inside the <ReactLucideIconPicker.Provider> to function correctly.

import 'react-lucide-icon-picker/style.css'
import { ReactLucideIconPicker } from 'react-lucide-icon-picker'
import { IconComponent } from 'react-lucide-icon-picker/components'

const App = () => (
  <ReactLucideIconPicker.Provider>
    <ReactLucideIconPicker.Search />
    <ReactLucideIconPicker.IconList />
  </ReactLucideIconPicker.Provider>
)

Using the onChange Prop

You can pass the onChange prop to either the ReactLucideIconPicker or the ReactLucideIconPicker.IconList component. This allows you to receive the key and SVG element of the selected icon.

Example:

import 'react-lucide-icon-picker/style.css'
import { ReactLucideIconPicker } from 'react-lucide-icon-picker'

const App = () => {
  const handleIconChange = ({ key, icon }) => {
    console.log('Selected Icon Key:', key)
    console.log('Selected Icon SVG Element:', icon)
  }

  return (
    <ReactLucideIconPicker onChange={handleIconChange}>
      {/* Other components can go here */}
    </ReactLucideIconPicker>
  )
}

or

import 'react-lucide-icon-picker/style.css'
import { ReactLucideIconPicker } from 'react-lucide-icon-picker'

const App = () => {
  const handleIconChange = ({ key, icon }) => {
    console.log('Selected Icon Key:', key)
    console.log('Selected Icon SVG Element:', icon)
  }

  return (
    <ReactLucideIconPicker.Provider>
      <ReactLucideIconPicker.IconList onChange={handleIconChange} />
    </ReactLucideIconPicker.Provider>
  )
}

Contributing

We welcome contributions to the React Lucide Icon Picker project. Please see the CONTRIBUTING.md file for guidelines on how to contribute.

License

The React Lucide Icon Picker is open source and available under the MIT License.