@ottomated/lucide-solid
v0.103.0
Published
A Lucide icon library package for Solid applications
Downloads
5
Readme
Lucide Solid
Implementation of the lucide icon library for solid applications.
What is lucide? Read it here.
Installation
yarn add lucide-solid
or
npm install lucide-solid
How to use
It's build with ESmodules so it's completely tree-shakable. Each icon can be imported as a solid component.
Example
You can pass additional props to adjust the icon.
import { Camera } from 'lucide-solid';
// Returns SolidComponent
// 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" />;
};
One generic icon component
It is possible to create one generic icon component to load icons.
:warning: 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-solid';
import type { LucideProps } from 'lucide-solid';
import { splitProps } from 'solid-js';
import { Dynamic } from 'solid-js/web';
const Icon = (props: { name: keyof typeof icons } & LucideProps) => {
const [local, others] = splitProps(props, ["name"]);
return <Dynamic component={icons[local.name]} {...others} />
};
export default Icon;