Mirrors/lucide
1
0
Fork 0
mirror of https://github.com/lucide-icons/lucide.git synced 2025-12-16 15:07:41 +01:00
Code Issues Packages Projects Releases Wiki Activity

docs: Update readme files (#2102)

Browse Source 
* Update lucide readme

* Add Readme and update package.jsons

* Update readme

* Update package logos

* Update darkmode logos

* Update title build font readme
This commit is contained in:
Eric Fennis
2024-04-24 17:43:51 +02:00
committed by GitHub
parent 305e282e19
commit 45e82a51b8
40 changed files with 603 additions and 1018 deletions
Download Patch File Download Diff File Expand all files Collapse all files

98
packages/lucide-vue-next/README.md
View File

@@ -1,3 +1,12 @@
<p align="center">
<a href="https://github.com/lucide-icons/lucide#gh-light-mode-only">
<img src="https://lucide.dev/package-logos/lucide-vue.svg#gh-light-mode-only" alt="Lucide Vue Next - Implementation of the lucide icon library for Vue 3 applications." width="400">
</a>
<a href="https://github.com/lucide-icons/lucide#gh-dark-mode-only">
<img src="https://lucide.dev/package-logos/package-logos/dark/lucide-vue.svg#gh-dark-mode-only" alt="Lucide Vue Next - Implementation of the lucide icon library for Vue 3 applications." width="400">
</a>
</p>
# Lucide Vue Next
Implementation of the lucide icon library for Vue 3 applications.
@@ -18,89 +27,26 @@ or
npm install lucide-vue-next
```
## How to use
## Documentation
It's build with ESmodules so it's completely tree-shakable.
Each icon can be imported as a vue component.
For full documentation, visit [lucide.dev](https://lucide.dev/guide/packages/lucide-vue-next)
### Example
## Community
You can pass additional props to adjust the icon.
Join the [Discord server](https://discord.gg/EH6nSts) to chat with the maintainers and other users.
```vue
<template>
<Camera color="red" :size="32" />
</template>
## License
<script>
// Returns Vue component
import { Camera } from 'lucide-vue-next';
Lucide is licensed under the ICS license. See [LICENSE](https://lucide.dev/license).
export default {
name: 'My Component',
components: { Camera }
};
</script>
```
## Sponsors
### Props
<a href="https://vercel.com?utm_source=lucide&utm_campaign=oss">
<img src="https://lucide.dev/vercel.svg" alt="Powered by Vercel" width="200" />
</a>
| name | type | default |
| ----------------------- | --------- | ------------ |
| `size` | *number* | 24 |
| `color` | *string* | currentColor |
| `stroke-width` | *number* | 2 |
| `absolute-stroke-width` | *boolean* | false |
| `default-class` | *string* | lucide-icon |
<a href="https://www.digitalocean.com/?refcode=b0877a2caebd&utm_campaign=Referral_Invite&utm_medium=Referral_Program&utm_source=badge"><img src="https://lucide.dev/digitalocean.svg" width="200" alt="DigitalOcean Referral Badge" /></a>
### Custom props
### Awesome backer 🍺
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-next';
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>
```
<a href="https://www.scipress.io?utm_source=lucide"><img src="https://lucide.dev/sponsors/scipress.svg" width="180" alt="Scipress sponsor badge" /></a>