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 icon library for Vue applications.

About · Icons · Documentation · License

Lucide Vue

Implementation of the lucide icon library for Vue 3 applications.

Installation

pnpm add lucide-vue-next

npm install lucide-vue-next

yarn add lucide-vue-next

bun add lucide-vue-next

Documentation

For full documentation, visit lucide.dev

Community

Join the Discord server to chat with the maintainers and other users.

License

Lucide is licensed under the ISC license. See LICENSE.

Sponsors

Awesome backers 🍺