mirror of
https://github.com/lucide-icons/lucide.git
synced 2026-11-12 13:38:32 +00:00
KarsaandEric Fennis
99d25bdee2
* feat(packages): extract build logic to @lucide/shared, still wip * feat(): unify icon build logic some more, add nonScalingStroke option, marking absoluteStrokeWidth as deprecated * feat(): unify icon build logic some more, add nonScalingStroke option, marking absoluteStrokeWidth as deprecated * feat(packages): extract build logic to @lucide/shared, still wip * feat(): unify icon build logic some more, add nonScalingStroke option, marking absoluteStrokeWidth as deprecated * feat(): unify icon build logic some more, add nonScalingStroke option, marking absoluteStrokeWidth as deprecated * chore(icons): revert git hook changes made to icons * fix(packages/astro,react-native,vue): fix iconNode type fix(packages/vue): fix hasA11yProp * fix(packages/solid): make component reactive & add unit tests for checking prop changes * test(packages/vue): add reactivity tests to @lucide/vue * fix(packages): replace cpy-cli, accidentally removed during main merge * docs(packages): upgrade react documentation with nonScalingStroke * fix(tests): update snapshots for lucide-react * feat(docs): upgraded package guides with nonScalingStroke, dropping absoluteStrokeWidth * fix(vue,react-native): fix linting issues * fix(icons): add proper fallback for icon width in calculatedStrokeWidth * fix(packages/svelte): add globalProps.class to icons * fix(packages/shared): wrap width, height & size in isDefined * Update types.ts * fix(packages/svelte): do not pass propsClass to mergeClasses --------- Co-authored-by: Eric Fennis <eric.fennis@gmail.com>
86 lines
2.2 KiB
Markdown
86 lines
2.2 KiB
Markdown
---
|
|
title: Getting started - Vue
|
|
description: This guide will help you get started with Lucide in your Vue project.
|
|
---
|
|
|
|
<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 add @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.
|
|
|
|
```vue
|
|
<script setup>
|
|
import { Camera } from '@lucide/vue';
|
|
</script>
|
|
|
|
<template>
|
|
<Camera />
|
|
</template>
|
|
```
|
|
|
|
## Props
|
|
|
|
To customize the appearance of an icon, you can use the following props:
|
|
|
|
| name | type | default |
|
|
| ------------------ | --------- | ------------ |
|
|
| `size` | _number_ | 24 |
|
|
| `color` | _string_ | currentColor |
|
|
| `stroke-width` | _number_ | 2 |
|
|
| `nonScalingStroke` | _boolean_ | false |
|
|
| `default-class` | _string_ | lucide-icon |
|
|
|
|
### Applying props
|
|
|
|
Because icons render as SVG elements, all standard SVG attributes can also be applied as props. See the list of SVG Presentation Attributes on [MDN](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/Presentation).
|
|
|
|
```vue
|
|
<template>
|
|
<Camera
|
|
:size="48"
|
|
color="red"
|
|
:stroke-width="1"
|
|
/>
|
|
</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>
|