Lucide Vue

为 Lucide 图标提供 Vue 2 组件，集成 Vue 的 Options API 和模板系统。每个图标都是一个 Vue 组件，以内联 SVG 渲染，给仍在使用 Vue 2 的遗留应用提供熟悉的 Vue 开发模式。

您可以实现的功能：

• 将图标作为 Vue 2 组件使用，并集成 Options API
• 用现代图标组件维护遗留的 Vue 2 应用
• 与 Vue 2 的模板系统和组件生命周期集成
• 使用 Vue 2 熟悉的语法和模式构建应用
• 在计划迁移到 Vue 3 的同时弥合差距

DANGER

此包已弃用。Vue 2 已停止维护。请参阅 公告。迁移到 Vue 3。

安装

pnpm

pnpm install lucide-vue

yarn

yarn add lucide-vue

npm

npm install lucide-vue

bun

bun add lucide-vue

如何使用

Lucide 使用 ES 模块构建，因此完全可进行树摇。

每个图标可以作为 Vue 组件导入，渲染为内联 SVG 元素。这样只有导入项目的图标会包含在最终打包中，其余图标将被树摇省略。

示例

可以传递附加属性来调整图标：

<template>
  <Camera color="red" :size="32" />
</template>

<script>
  import { Camera } from 'lucide-vue';

  export default {
    name: 'My Component',
    components: { Camera }
  };
</script>

Props

name	type	default
size	number	24
color	string	currentColor
stroke-width	number	2
absoluteStrokeWidth	boolean	false
default-class	string	lucide-icon

应用属性

要定制图标的外观，您可以直接将自定义属性作为 props 传递给组件。该组件接受所有 SVG 属性作为 props，从而允许灵活地为 SVG 元素添加样式。有关 SVG 演示属性列表，请参阅 MDN。

<template>
  <Camera fill="red" />
</template>

一个通用的图标组件

可以创建一个通用的图标组件来加载图标，但不建议这样做。

DANGER

下面的示例导入了所有 ES 模块，使用时请格外小心。导入所有图标会显著增加应用的构建大小，负面影响其性能，特别是在使用 Webpack、Rollup 或 Vite 等打包器时。

图标组件示例

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

使用图标组件

<template>
  <div id="app">
    <Icon name="Airplay" />
  </div>
</template>