Lucide Vue Next

Lucide 图标库的 Vue 3 应用实现。

安装

pnpm

pnpm install lucide-vue-next

yarn

yarn add lucide-vue-next

npm

npm install lucide-vue-next

bun

bun add lucide-vue-next

如何使用

Lucide 使用 ES Modules 构建，因此完全支持 Tree Shaking。

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

示例

您可以传递额外的 props 来自定义图标。

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

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

属性

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>

与 Lucide lab 或自定义图标一起使用

Lucide lab 是一个图标集合，不属于 Lucide 主库。

它们可以通过使用 Icon 组件来使用。所有像常规 Lucide 图标一样的 props 都可以传递以调整图标外观。

使用 Icon 组件

这会基于传递的 iconNode 创建单个图标，并渲染一个 Lucide 图标组件。

<script setup>
import { Icon } from 'lucide-vue-next';
import { baseball } from '@lucide/lab';
</script>

<template>
  <Icon :iconNode="baseball" />
</template>

一个通用图标组件

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

DANGER

下面的示例导入了所有 ES Modules，因此在使用时请谨慎。它会导入所有图标，从而显著增加应用程序的构建大小，负面影响其性能。这在使用像 Webpack、Rollup 或 Vite 这样的打包工具时尤为重要。

图标组件示例

<script setup>
import { computed } from 'vue';
import * as icons from "lucide-vue-next";

const props = defineProps({
  name: {
    type: String,
    required: true
  },
  size: Number,
  color: String,
  strokeWidth: Number,
  defaultClass: String
})

const icon = computed(() => icons[props.name]);
</script>

<template>
  <component
    :is="icon"
    :size="size"
    :color="color"
    :stroke-width="strokeWidth" :default-class="defaultClass"
  />
</template>

使用图标组件

上面列出的所有其他 props 也适用于 Icon 组件。

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