mirror of
https://github.com/lucide-icons/lucide.git
synced 2025-12-18 13:37:44 +01:00
82 lines
2.2 KiB
Markdown
82 lines
2.2 KiB
Markdown
|
<script setup>
|
||
|
|
import OverviewLink from '../../.vitepress/theme/components/base/OverviewLink.vue'
|
||
|
|
import OverviewLinkGrid from '../../.vitepress/theme/components/base/OverviewLinkGrid.vue'
|
||
|
|
import { vueSidebar } from '../../.vitepress/sidebar/vue'
|
||
|
|
</script>
|
||
|
|
|
||
|
|
# Getting started
|
||
|
|
|
||
|
|
This guide will help you get started with Lucide in your Vue project.
|
||
|
|
Make sure you have a Vue environment set up. If you don't have one yet, you can create a new Vue project using Vite, or any other Vue boilerplate of your choice.
|
||
|
|
|
||
|
|
## Installation
|
||
|
|
|
||
|
|
::: code-group
|
||
|
|
|
||
|
|
```sh [pnpm]
|
||
|
|
pnpm install @lucide/vue
|
||
|
|
```
|
||
|
|
|
||
|
|
```sh [yarn]
|
||
|
|
yarn add @lucide/vue
|
||
|
|
```
|
||
|
|
|
||
|
|
```sh [npm]
|
||
|
|
npm install @lucide/vue
|
||
|
|
```
|
||
|
|
|
||
|
|
```sh [bun]
|
||
|
|
bun add @lucide/vue
|
||
|
|
```
|
||
|
|
|
||
|
|
:::
|
||
|
|
|
||
|
|
## Importing your first icon
|
||
|
|
|
||
|
|
Lucide is built with ES Modules, so it's completely tree-shakable.
|
||
|
|
|
||
|
|
Each icon can be imported as a Vue component, which renders an inline SVG element. This way, only the icons that are imported into your project are included in the final bundle. The rest of the icons are tree-shaken away.
|
||
|
|
|
||
|
|
### Example
|
||
|
|
|
||
|
|
Additional props can be passed to adjust the icon:
|
||
|
|
|
||
|
|
```vue
|
||
|
|
<script setup>
|
||
|
|
import { Camera } from '@lucide/vue';
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<template>
|
||
|
|
<Camera
|
||
|
|
color="red"
|
||
|
|
:size="32"
|
||
|
|
/>
|
||
|
|
</template>
|
||
|
|
```
|
||
|
|
|
||
|
|
## Props
|
||
|
|
|
||
|
|
| name | type | default |
|
||
|
|
| ----------------------- | --------- | ------------ |
|
||
|
|
| `size` | *number* | 24 |
|
||
|
|
| `color` | *string* | currentColor |
|
||
|
|
| `stroke-width` | *number* | 2 |
|
||
|
|
| `absoluteStrokeWidth` | *boolean* | false |
|
||
|
|
| `default-class` | *string* | lucide-icon |
|
||
|
|
|
||
|
|
### Applying props
|
||
|
|
|
||
|
|
To customize the appearance of an icon, you can pass custom properties as props directly to the component. The component accepts all SVG attributes as props, which allows flexible styling of the SVG elements. See the list of SVG Presentation Attributes on [MDN](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/Presentation).
|
||
|
|
|
||
|
|
```vue
|
||
|
|
<template>
|
||
|
|
<Camera fill="red" />
|
||
|
|
</template>
|
||
|
|
```
|
||
|
|
|
||
|
|
More examples and details how to use props, continue the guide:
|
||
|
|
|
||
|
|
<OverviewLinkGrid>
|
||
|
|
<OverviewLink v-for="item in vueSidebar[1].items" :key="item.link" :href="item.link" :title="item.text" :desc="item.desc"/>
|
||
|
|
</OverviewLinkGrid >
|