lucide-solid-nc
v0.0.7
Published
A Lucide icon library package for Solid applications
Downloads
45
Maintainers
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;