or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

component-factory.mdicon-components.mdindex.mdtypescript-support.md
tile.json

tessl/npm-tabler--icons-vue

Implementation of the Tabler Icons library for Vue 3 applications with over 5,900 high-quality SVG icons.

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/@tabler/icons-vue@3.34.x

To install, run

npx @tessl/cli install tessl/npm-tabler--icons-vue@3.34.0

index.mddocs/

@tabler/icons-vue

@tabler/icons-vue provides Vue 3 components for the Tabler Icons library. It transforms over 5,900 high-quality SVG icons into tree-shakable Vue components with customizable properties, supporting both outline and filled styles with full TypeScript integration.

Package Information

  • Package Name: @tabler/icons-vue
  • Package Type: npm
  • Language: TypeScript/JavaScript
  • Framework: Vue 3
  • Installation: npm install @tabler/icons-vue or pnpm install @tabler/icons-vue

Core Imports

<script setup>
import { IconHome, IconSettings, IconUser } from '@tabler/icons-vue';
</script>

For CommonJS:

const { IconHome, IconSettings, IconUser } = require('@tabler/icons-vue');

Import filled versions:

<script setup>
import { IconHomeFilled, IconSettingsFilled } from '@tabler/icons-vue';
</script>

Namespace imports:

import { icons, iconsList } from '@tabler/icons-vue';

// Use icons namespace
const HomeIcon = icons.IconHome;
const SettingsIcon = icons.IconSettings;

// Access icon metadata
console.log(iconsList); // Array/object with icon information

Basic Usage

<template>
  <!-- Basic icon usage -->
  <IconHome />
  
  <!-- Customized icon with props -->
  <IconHome 
    color="red" 
    size="32" 
    stroke-width="1.5"
    title="Home Page"
  />
  
  <!-- Filled icon variant -->
  <IconHomeFilled color="blue" size="24" />
  
  <!-- Event handling -->
  <IconSettings @click="openSettings" />
  
  <!-- Custom CSS classes -->
  <IconUser class="user-icon" />
</template>

<script setup>
import { IconHome, IconHomeFilled, IconSettings, IconUser } from '@tabler/icons-vue';

function openSettings() {
  console.log('Settings clicked');
}
</script>

Architecture

@tabler/icons-vue is built around several key components:

  • Icon Components: 5,945 pre-built Vue functional components (4,964 outline + 981 filled)
  • Component Factory: createVueComponent function for custom icon creation
  • Type System: Full TypeScript definitions with proper Vue component typing
  • Props System: Consistent prop interface across all icon components
  • Build System: Automated generation from SVG files with tree-shaking support
  • Alias System: Alternative names for backward compatibility (100+ aliases)

Capabilities

Icon Components

Individual Vue components for each Tabler icon, available in outline and filled variants. Each component is fully typed and supports all standard Vue component features.

// Outline icons (default style)
declare const IconHome: FunctionalComponent<SVGProps>;
declare const IconSettings: FunctionalComponent<SVGProps>;
declare const IconUser: FunctionalComponent<SVGProps>;

// Filled icons (solid style)
declare const IconHomeFilled: FunctionalComponent<SVGProps>;
declare const IconSettingsFilled: FunctionalComponent<SVGProps>;

interface SVGProps extends Partial<SVGAttributes> {
  size?: 24 | number | string;
  strokeWidth?: number | string;
}

interface IconProps extends Partial<Omit<SVGProps, 'stroke'>> {
  size?: string | number; // Default: 24
  stroke?: string | number; // Color for outline icons, default: 'currentColor'
  title?: string; // Accessibility title
}

Icon Components

Icons Namespace

All icon components grouped under icons namespace for alternative import patterns and dynamic access.

declare const icons: {
  IconHome: FunctionalComponent<SVGProps>;
  IconHomeFilled: FunctionalComponent<SVGProps>;
  IconSettings: FunctionalComponent<SVGProps>;
  IconSettingsFilled: FunctionalComponent<SVGProps>;
  // ... all 5,945 icon components
};

Icons List

Metadata and comprehensive list of all available icons for dynamic icon selection and discovery.

declare const iconsList: IconMetadata[] | Record<string, IconMetadata>;

interface IconMetadata {
  name: string;
  category?: string;
  tags?: string[];
  unicode?: string;
}

Icon Aliases

Alternative names for icon components to support backward compatibility and common naming patterns.

// Icon aliases are exported directly as named exports
// Examples:
declare const IconArrowUp: FunctionalComponent<SVGProps>; // Alias for IconChevronUp
declare const IconCheck: FunctionalComponent<SVGProps>; // Alias for IconCheckmark
// ... over 100 icon aliases available

Component Factory

Factory function for creating custom Vue icon components from SVG data or for extending the library with custom icons.

declare function createVueComponent(
  type: 'outline' | 'filled',
  iconName: string,
  iconNamePascal: string,
  iconNode: IconNode
): Icon;

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

Component Factory

TypeScript Support

Complete TypeScript definitions for all components, interfaces, and utility functions with full Vue 3 integration.

interface SVGProps extends Partial<SVGAttributes> {
  size?: 24 | number | string;
  strokeWidth?: number | string;
}

interface IconProps extends Partial<Omit<SVGProps, 'stroke'>> {
  size?: string | number;
  stroke?: string | number;
  title?: string;
}

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

TypeScript Support

Types

interface IconProps extends Partial<Omit<SVGProps, 'stroke'>> {
  /** Icon size in pixels (width and height) */
  size?: string | number;
  /** Stroke color for outline icons or fill color for filled icons */
  stroke?: string | number;
  /** Accessibility title element content */
  title?: string;
}

interface SVGProps extends Partial<SVGAttributes> {
  size?: 24 | number | string;
  strokeWidth?: number | string;
}

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

type Icon = FunctionalComponent<SVGProps>;