lucide-vue

    0.16.12 • Public • Published

    Lucide Vue

    Implementation of the lucide icon library for Vue applications.

    What is lucide? Read it here.

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

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

    Keywords

    none

    Install

    npm i lucide-vue

    Homepage

    lucide.dev/

    DownloadsWeekly Downloads

    464

    Version

    0.16.12

    License

    ISC

    Unpacked Size

    1.62 MB

    Total Files

    528

    Last publish

    Collaborators

    • ericfennis