Package Exports

lucide-vue-next
lucide-vue-next/dist/cjs/lucide-vue-next.js
lucide-vue-next/dist/esm/lucide-vue-next.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (lucide-vue-next) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Lucide Vue Next

Implementation of the lucide icon library for Vue 3 applications.

What is lucide? Read it here.

⚠️ This version of lucide is for Vue 3, For Vue 2 got to lucide-vue

Installation

yarn add lucide-vue-next

npm install lucide-vue-next

How to use

It's build with ESmodules so it's completely tree-shakable. Each icon can be imported as a vue component.

Example

You can pass additional props to adjust the icon.

<template>
  <Camera color="red" :size="32" />
</template>

<script>
// Returns Vue component
import { Camera } from 'lucide-vue-next';

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.

<template>
  <Camera fill="red" />
</template>

One generic icon component

It is possible to create one generic icon component to load icons.

⚠️ 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

<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

<template>
  <div id="app">
    <Icon name="Airplay" />
  </div>
</template>