ad1accb2e3
* Fixed import of toKebabCase helper function * Added utils package * utils * Make utils package work in build * Add lucide-shared * Transpile solid with esbuild * Fix resolve modules * Cleanup * Format files * Fix properties plugins function * Fix properties plugins in lucide package * Revert remove resolve plugin and cleanup * Update snapshots * Revert icon changes --------- Co-authored-by: Rohan <rohancrrm@gmail.com>
Lucide Preact
Implementation of the lucide icon library for preact applications.
What is lucide? Read it here.
Installation
yarn add lucide-preact
or
npm install lucide-preact
How to use
It's build with ESmodules so it's completely tree-shakable. Each icon can be imported as a preact component.
Example
You can pass additional props to adjust the icon.
import { Camera } from 'lucide-preact';
// Returns PreactComponent
// Usage
const App = () => {
return <Camera color="red" size={48} />;
};
export default App;
Props
| name | type | default |
|---|---|---|
size |
Number | 24 |
color |
String | currentColor |
strokeWidth |
Number | 2 |
Custom props / svg attributes
You can also pass custom props that will be added in the as attributes. With that you can modify the icons look by passing svg attributes.
// Usage
const App = () => {
return <Camera fill="red" stroke-linejoin="bevel" />;
};
svg attributes in preact aren't transformed, so if want to change e.g. the
stroke-linejoinyou need to pass it in kebabcase, the way svg spec is written so. See this topic in the preact documentation.
One generic icon component
It is possible to create one generic icon component to load icons.
⚠️ Example below importing all EsModules, caution using this example, not recommended when you using bundlers, your application build size will grow strongly.
Icon Component Example
import * as icons from 'lucide-preact';
const Icon = ({ name, color, size }) => {
const LucideIcon = icons[name];
return <LucideIcon color={color} size={size} />;
};
export default Icon;