Lucide 中文网

Appearance

Lucide Vue ​

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

¥Vue 2 components for Lucide icons that integrate with Vue's Options API and template system. Each icon is a Vue component that renders as an inline SVG, providing familiar Vue development patterns for legacy applications still using Vue 2.

你可以实现的目标：

¥What you can accomplish:

  • 将图标用作 Vue 2 组件，并集成 Options API

    ¥Use icons as Vue 2 components with Options API integration

  • 使用现代图标组件维护旧版 Vue 2 应用

    ¥Maintain legacy Vue 2 applications with modern icon components

  • 与 Vue 2 的模板系统和组件生命周期集成

    ¥Integrate with Vue 2's template system and component lifecycle

  • 使用 Vue 2 熟悉的语法和模式构建应用

    ¥Build applications using Vue 2's familiar syntax and patterns

  • 在计划迁移到 Vue 3 的同时弥补差距

    ¥Bridge the gap while planning migration to Vue 3

危险

此软件包已弃用。Vue 2 已结束，请参阅 公告。迁移到 Vue 3。

¥This package is deprecated. Vue 2 is EOF See Announcement. Migrate to Vue 3.

安装 ​

¥Installation

sh
pnpm install lucide-vue
sh
yarn add lucide-vue
sh
npm install lucide-vue
sh
bun add lucide-vue

如何使用 ​

¥How to use

Lucide 基于 ES 模块构建，因此完全支持 tree-shaking。

¥Lucide is built with ES Modules, so it's completely tree-shakable.

每个图标都可以作为 Vue 组件导入，该组件会渲染一个内联 SVG 元素。这样，只有导入到项目中的图标才会包含在最终的软件包中。其余图标已通过 tree-shaking 移除。

¥Each icon can be imported as a Vue component, which renders an inline SVG Element. This way only the icons that are imported into your project are included in the final bundle. The rest of the icons are tree-shaken away.

示例 ​

¥Example

可以传递其他属性来调整图标：

¥Additional props can be passed to adjust the icon:

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

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

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

属性 ​

¥Props

nametypedefault
sizenumber24
colorstringcurrentColor
stroke-widthnumber2
absoluteStrokeWidth布尔值false
default-classstringlucide-icon

应用属性 ​

¥Applying props

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

¥To customize the appearance of an icon, you can pass custom properties as props directly to the component. The component accepts all SVG attributes as props, which allows flexible styling of the SVG elements. See the list of SVG Presentation Attributes on MDN.

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

一个通用图标组件 ​

¥One generic icon component

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

¥It is possible to create one generic icon component to load icons, but it is not recommended.

危险

以下示例导入了所有 ES 模块，因此使用时请谨慎。导入所有图标将显著增加应用的构建大小，从而对其性能产生负面影响。在使用 Webpack、Rollup 或 Vite 等打包器时，这一点尤为重要。

¥The example below imports all ES Modules, so exercise caution when using it. Importing all icons will significantly increase the build size of the application, negatively affecting its performance. This is especially important when using bundlers like Webpack, Rollup, or Vite.

图标组件示例 ​

¥Icon Component Example

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

使用图标组件 ​

¥Using the Icon Component

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