b4e4f002f2
* add configs
* Add vue components
* Add documentation
* add alpha release version
* improve npm ignore files
* add tests
* Make style and class attrs work
* 📦 bump version
* Add Icon suffix for component names
* bump version
* Add icon component example
* remove space
* add new build strategy
* Write a better intro
* add other node design
* fix
* add new default template
* add tempalte
* improve code
* small improvements
* small improvements
* move files
* Connect lucide with lucide-react
* Add support for vue
* Add licenses to packages
* Fix tests
* refactor build scripts
* Minor code fixes
* update homepage readme
* Update footer text
* Add a better introduction to packages
* Split up in tempaltes
* Add new types build file
* Setup workflow file
* update readme
* update
* Fix build
* remove debug code
* Add check if svgs have duplicated children
* Add check if their are no children
* small fixes
* last fixes in the build
* Move script to packages folder
* Fix tests and add types for lucide
* Add rule to package.json
* add types in build
* add npm ignore
* update package.jsons
106 lines
1.7 KiB
Markdown
106 lines
1.7 KiB
Markdown
# Lucide Vue
|
|
|
|
Implementation of the lucide icon library for Vue applications.
|
|
|
|
> What is lucide? Read it [here](https://github.com/lucide-icons/lucide#what-is-lucide).
|
|
|
|
## Installation
|
|
|
|
```sh
|
|
yarn add lucide-vue
|
|
|
|
# or
|
|
|
|
npm install lucide-vue
|
|
```
|
|
|
|
## How to use
|
|
|
|
It's build with ESmodules so it's completely threeshakable.
|
|
Each icon can be imported as a vue component.
|
|
|
|
### Example
|
|
|
|
You can pass additional props to adjust the icon.
|
|
|
|
``` vue
|
|
<template>
|
|
<Camera
|
|
color="red"
|
|
:size="32"
|
|
/>
|
|
</template>
|
|
|
|
<script>
|
|
// Returns Vue component
|
|
import { Camera } from 'lucide-vue';
|
|
|
|
export default {
|
|
name: "My Component",
|
|
components: { Camera }
|
|
}
|
|
|
|
</script>
|
|
```
|
|
|
|
### Props
|
|
|
|
| name | type | default
|
|
| ------------ | -------- | --------
|
|
| `size` | *Number* | 24
|
|
| `color` | *String* | currentColor
|
|
| `strokeWidth`| *Number* | 2
|
|
| `defaultClass`| *String* | lucide-icon
|
|
|
|
### Custom props
|
|
|
|
You can also pass custom props that will be added in the svg as attributes.
|
|
|
|
``` vue
|
|
<template>
|
|
<Camera fill="red" />
|
|
</template>
|
|
```
|
|
|
|
### 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
|
|
|
|
``` vue
|
|
<template>
|
|
<component :is="icon" />
|
|
</template>
|
|
|
|
<script>
|
|
import * as icons from "lucide-vue";
|
|
|
|
export default {
|
|
props: {
|
|
name: {
|
|
type: String,
|
|
required: true,
|
|
},
|
|
},
|
|
computed: {
|
|
icon() {
|
|
return icons[this.name];
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
```
|
|
|
|
##### Then you can use it like this
|
|
|
|
``` vue
|
|
<template>
|
|
<div id="app">
|
|
<Icon name="Airplay" />
|
|
</div>
|
|
</template>
|
|
```
|