Lucide Vue

Vue 应用的 Lucide 图标库实现。

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 Modules 构建，因此完全支持 Tree Shaking。

每个图标都可以作为 Vue 组件导入，它会渲染一个内联 SVG 元素。这样，只有导入到项目中的图标才会包含在最终的包中。其余图标会被 Tree Shaking 移除。

示例

可以传递额外的 props 来调整图标：

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

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

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

属性

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 元素。请参阅 MDN 上的SVG 呈现属性列表。

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

一个通用图标组件

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

DANGER

下面的示例会导入所有 ES Modules，因此在使用时请谨慎。导入所有图标会显著增加应用程序的构建大小，从而负面影响其性能。这在使用 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>