Lucide Vue Package

[ericfennis]

The lucide vue npm package.

Alpha pre-release on: 0.12.0-alpha.5.
Feedback is welcome!

Docs here below:

Lucide Vue

Use the lucide icon library in you Vue app.

Installation

yarn add lucide-vue

# or

npm install lucide-vue

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

export default {
  name: "My Component",
  components: { Camera }
}

</script>

Props

name	type	default
size	Number	24
color	String	currentColor
strokeWidth	Number	2

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

...

WIP

[mittalyashu]

@ericfennis I was trying using the vue package, it doesn't add class attribute to icon

(forget about the second alert, see the first one)

<success-icon
	v-if="type === 'success'"
	class="alert-icon alert-icon-success"
/>

I can try adding a class to parent tag (non lucide icon) and target its child using CSS selector.

[ericfennis]

@mittalyashu Thanks for testing this, I will add this test case to tests. To be clear, you using Vue 2 right?

[mittalyashu]

To be clear, you using Vue 2 right?

@ericfennis yes

[mittalyashu]

@ericfennis I mean, we can be discussed if we should add support for custom class and style attribute or not (you don't have to take my word).

[ericfennis]

@mittalyashu Intentionally I wanted to support that, like we do with the react package. I consider this as a bug.

[mittalyashu]

okay

[mittalyashu]

Any ETA when non alpha/beta version will be released? @ericfennis

[ericfennis]

I hope Soon, I'm working on it right now. But have some problems with inheriting styling and classes.

[ericfennis]

@mittalyashu Just released 0.12.0-alpha.5 style and class attributes seems to work now.

[mittalyashu]

Yup, seems to be working fine.

[vercel]

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://vercel.com/lucide/lucide/5opQFhSCP4D29WmnmpiTNLYhZMNQ
✅ Preview: https://lucide-git-fork-ericfennis-feature-lucide-vue-lucide.vercel.app