tessl/npm-tabler--icons-vue

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

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Securityby

Pending

The risk profile of this skill

Overview

Eval results

Files

@tabler/icons-vue

Name: tessl/npm-tabler--icons-vue
Author: tessl

@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>;