or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

core-rendering.mdicon-components.mdicon-factory.mdindex.md
tile.json

tessl/npm-lucide-vue-next

A Lucide icon library package for Vue 3 applications.

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/lucide-vue-next@0.542.x

To install, run

npx @tessl/cli install tessl/npm-lucide-vue-next@0.542.0

index.mddocs/

Lucide Vue Next

Lucide Vue Next is a comprehensive Vue 3 icon library that provides access to 1,600+ beautiful, customizable SVG icons from the Lucide icon set. It offers both individual icon components and utility functions for creating custom icon components, with full TypeScript support, tree-shaking capabilities, and seamless integration with Vue 3's Composition API.

Package Information

  • Package Name: lucide-vue-next
  • Package Type: npm
  • Language: TypeScript
  • Installation: npm install lucide-vue-next

Core Imports

import { Icon, createLucideIcon, Smile, Activity } from "lucide-vue-next";

For CommonJS:

const { Icon, createLucideIcon, Smile, Activity } = require("lucide-vue-next");

Namespace import for all icons:

import { icons } from "lucide-vue-next";
// Use as: icons.Smile, icons.Activity, etc.

Basic Usage

<template>
  <div>
    <!-- Basic icon usage -->
    <Smile />
    
    <!-- Customized icon -->
    <Activity 
      :size="32" 
      color="blue" 
      :stroke-width="1.5" 
    />
    
    <!-- Using Icon component directly -->
    <Icon 
      :icon-node="customIconData" 
      name="custom-icon"
      :size="24" 
    />
    
    <!-- Icon with slots for custom content -->
    <Smile :size="24">
      <text x="12" y="18" text-anchor="middle" font-size="8">New</text>
    </Smile>
  </div>
</template>

<script setup>
import { Smile, Activity, Icon } from "lucide-vue-next";

const customIconData = [
  ['path', { d: 'M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z' }]
];
</script>

Architecture

Lucide Vue Next is built around several key architectural components:

  • Icon Components: 1,600+ pre-built Vue functional components, one for each Lucide icon
  • Base Icon Renderer: Core Icon component that renders SVG icons from data structures
  • Icon Factory: createLucideIcon function for generating custom icon components
  • Type System: Full TypeScript integration with props interfaces and icon data types
  • Build System: Automated generation of icon components from SVG sources during build
  • Alias System: Backward compatibility through deprecated icon name aliases

Capabilities

Individual Icon Components

Access to 1,600+ pre-built icon components with consistent Vue 3 functional component interface. Each icon supports all standard SVG properties plus library-specific customization options.

// Example icon components (representative of all 1,600+ icons)
const Smile: FunctionalComponent<LucideProps>;
const Activity: FunctionalComponent<LucideProps>;
const Accessibility: FunctionalComponent<LucideProps>;
const AArrowDown: FunctionalComponent<LucideProps>;
// ... 1,600+ more icon components

Icon Components

Core Icon Rendering

Base functionality for rendering SVG icons from data structures. Provides the foundation for all icon components and enables custom icon creation.

const Icon: FunctionalComponent<LucideProps & IconProps>;

interface IconProps {
  /** SVG element data structure defining the icon's paths and shapes */
  iconNode: IconNode;
  /** Icon name used for CSS class generation */
  name: string;
}

interface LucideProps extends Partial<SVGAttributes> {
  /** Icon size in pixels (both width and height), defaults to 24 */
  size?: 24 | number;
  /** Stroke width for icon lines */
  strokeWidth?: number | string;
  /** Disable automatic stroke width scaling based on icon size */
  absoluteStrokeWidth?: boolean;
  /** Kebab-case version of absoluteStrokeWidth */
  'absolute-stroke-width'?: boolean;
}

Core Rendering

Icon Factory

Factory function for creating custom icon components from SVG data structures. Essential for building icon libraries or integrating custom SVG content.

function createLucideIcon(
  iconName: string, 
  iconNode: IconNode
): FunctionalComponent<LucideProps>;

type IconNode = [elementName: string, attrs: Record<string, string>][];

Icon Factory

Types

interface LucideProps extends Partial<SVGAttributes> {
  /** Icon size in pixels (both width and height), defaults to 24 */
  size?: 24 | number;
  /** Stroke width for icon lines */
  strokeWidth?: number | string;
  /** Disable automatic stroke width scaling based on icon size */
  absoluteStrokeWidth?: boolean;
  /** Kebab-case version of absoluteStrokeWidth */
  'absolute-stroke-width'?: boolean;
}

type IconNode = [elementName: string, attrs: Record<string, string>][];
type LucideIcon = FunctionalComponent<LucideProps>;
type SVGProps = LucideProps; // Legacy alias