lucide-vue-next

What is lucide-vue-next?

The lucide-vue-next package is a Vue 3 component library for using Lucide icons. Lucide is an open-source icon library that provides a wide range of customizable and scalable vector icons. The lucide-vue-next package allows developers to easily integrate these icons into their Vue 3 applications.

What are lucide-vue-next's main functionalities?

Icon Usage

This feature allows you to use Lucide icons in your Vue 3 components. By importing the LucideIcon component from lucide-vue-next, you can easily render any icon by specifying its name as a prop.

<template>
  <div>
    <LucideIcon name="activity" />
  </div>
</template>

<script>
import { defineComponent } from 'vue';
import { LucideIcon } from 'lucide-vue-next';

export default defineComponent({
  components: {
    LucideIcon
  }
});
</script>

Customizable Icons

Lucide icons are highly customizable. You can change their color, size, and other properties by passing additional props to the LucideIcon component. This makes it easy to adapt the icons to fit the design of your application.

<template>
  <div>
    <LucideIcon name="activity" color="red" size="48" />
  </div>
</template>

<script>
import { defineComponent } from 'vue';
import { LucideIcon } from 'lucide-vue-next';

export default defineComponent({
  components: {
    LucideIcon
  }
});
</script>

Other packages similar to lucide-vue-next

vue-feather-icons

vue-feather-icons is a Vue component library for Feather icons, which are also open-source and similar in style to Lucide icons. Like lucide-vue-next, it provides a simple way to integrate icons into Vue applications. However, Lucide offers a broader range of icons and more customization options.

vue-awesome

vue-awesome is a Vue component library for Font Awesome icons. It provides a wide range of icons and is well-known for its extensive collection. Compared to lucide-vue-next, vue-awesome offers more icons but may not have the same level of customization and modern design as Lucide icons.

heroicons

heroicons is a set of free, MIT-licensed high-quality SVG icons for UI development. It is not specifically a Vue component library, but it can be used in Vue projects. Heroicons are similar in style to Lucide icons, but lucide-vue-next provides a more straightforward integration with Vue 3 applications.

README

Lucide Vue Next

Implementation of the lucide icon library for Vue 3 applications.

What is lucide? Read it here.

:warning: This version of lucide is for Vue 3, For Vue 2 got to lucide-vue-next

Installation

yarn add lucide-vue-next

# or

npm install lucide-vue-next

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.

<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.

: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

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