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

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>

Use with @nuxt/components

Setup

In your nuxt.config.js, add lucide-vue/nuxt to your buildModules

export default {
  buildModules: ['lucide-vue/nuxt']
};

How to use

Icon components are prefixed with Icon. Use icon components without importing them.

Example

<IconCamera color="red" :size="32" />