{"library":"lucide-react","title":"Lucide React Icons","description":"Lucide React is the official React component library for Lucide, a comprehensive and modern open-source icon set. It provides a highly customizable collection of SVG icons designed for ease of use in React applications. Currently at version 1.8.0, the library maintains a rapid release cadence, frequently adding new icons and minor fixes, with a major V1 release signifying its stability and widespread adoption. Lucide aims to be a spiritual successor to Feather Icons, offering a larger and continuously expanding icon set, improved accessibility features, and better tree-shaking capabilities. It supports various customization options such as size, stroke width, color, and more, making it a flexible choice for modern web development.","language":"javascript","status":"active","last_verified":"Sun Apr 19","install":{"commands":["npm install lucide-react"],"cli":null},"imports":["import { Bell } from 'lucide-react'","import { type LucideIcon } from 'lucide-react'","import { type LucideProps } from 'lucide-react'"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import React from 'react';\nimport { Bell, Settings, Sun, Moon } from 'lucide-react';\n\ninterface MyIconDisplayProps {\n  theme: 'light' | 'dark';\n}\n\nfunction MyIconDisplay({ theme }: MyIconDisplayProps) {\n  const iconColor = theme === 'light' ? '#333' : '#eee';\n\n  return (\n    <div style={{ display: 'flex', gap: '20px', padding: '20px', background: theme === 'light' ? '#fff' : '#222', borderRadius: '8px' }}>\n      <Bell size={24} color={iconColor} strokeWidth={2} />\n      <Settings size={32} color={iconColor} strokeWidth={1.5} />\n      {theme === 'light' ? (\n        <Sun size={28} color=\"orange\" />\n      ) : (\n        <Moon size={28} color=\"lightblue\" />\n      )}\n      <p style={{ color: iconColor, margin: 0 }}>Lucide icons in action!</p>\n    </div>\n  );\n}\n\nexport default MyIconDisplay;\n","lang":"typescript","description":"Demonstrates importing and rendering multiple Lucide icons in a React component with custom size, color, and stroke width props, including conditional rendering.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}