tessl/npm-tabler--icons-vue

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

—

Pending

Overview

Eval results

Files

Component Factory

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

The createVueComponent function enables creation of custom Vue icon components from SVG data, providing the same functionality and interface as the built-in Tabler icons. This is useful for extending the library with custom icons or integrating external icon sets.

Capabilities

createVueComponent Function

Factory function that creates Vue functional components for icon rendering with full prop support and Vue 3 integration.

/**
 * Creates a Vue functional component for icon rendering
 * @param type - Icon style ('outline' for stroke-based, 'filled' for solid)
 * @param iconName - Kebab-case icon name used for CSS classes
 * @param iconNamePascal - PascalCase icon name (typically unused but required)  
 * @param iconNode - SVG structure as array of [elementName, attributes] pairs
 * @returns Vue functional component with IconProps interface
 */
declare function createVueComponent(
  type: 'outline' | 'filled',
  iconName: string,
  iconNamePascal: string,
  iconNode: IconNode
): Icon;

/**
 * SVG structure definition - array of element definitions
 * Each element is represented as [tagName, attributesObject]
 */
type IconNode = [elementName: string, attrs: Record<string, string>][];

/**
 * Resulting icon component type
 */
type Icon = FunctionalComponent<IconProps>;

Usage Examples:

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

// Create a custom outline icon
const IconCustomStar = createVueComponent(
  'outline',
  'custom-star',
  'CustomStar',
  [
    ['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' }]
  ]
);

// Create a custom filled icon
const IconCustomHeartFilled = createVueComponent(
  'filled',
  'custom-heart',
  'CustomHeart',
  [
    ['path', { d: 'M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z' }]
  ]
);

IconNode Structure

The IconNode type defines how SVG elements are represented for the component factory.

/**
 * SVG element representation as [tagName, attributes] pairs
 * Supports all standard SVG elements and attributes
 */
type IconNode = [elementName: string, attrs: Record<string, string>][];

// Element types supported:
// - 'path': SVG path elements with 'd' attribute
// - 'circle': Circle elements with 'cx', 'cy', 'r' attributes  
// - 'rect': Rectangle elements with 'x', 'y', 'width', 'height' attributes
// - 'line': Line elements with 'x1', 'y1', 'x2', 'y2' attributes
// - 'polyline': Polyline elements with 'points' attribute
// - 'polygon': Polygon elements with 'points' attribute
// - All other standard SVG elements

IconNode Examples:

// Simple path icon
const pathIcon: IconNode = [
  ['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' }]
];

// Multi-element icon
const complexIcon: IconNode = [
  ['circle', { cx: '12', cy: '12', r: '10' }],
  ['path', { d: 'L12 6l0 6' }],
  ['path', { d: 'L12 16l.01 0' }]
];

// Icon with multiple paths
const multiPathIcon: IconNode = [
  ['path', { d: 'M9 12l2 2l4 -4' }],
  ['path', { d: 'M21 12c0 4.97 -4.03 9 -9 9s-9 -4.03 -9 -9s4.03 -9 9 -9s9 4.03 9 9z' }]
];

Component Type Configuration

The type parameter determines the icon's visual style and default attributes.

/**
 * Icon type configuration affects default attributes and styling
 */
type IconType = 'outline' | 'filled';

// 'outline' type applies these default attributes:
const outlineDefaults = {
  xmlns: 'http://www.w3.org/2000/svg',
  width: 24,
  height: 24,
  viewBox: '0 0 24 24',
  fill: 'none',
  stroke: 'currentColor',
  'stroke-width': 2,
  'stroke-linecap': 'round',
  'stroke-linejoin': 'round'
};

// 'filled' type applies these default attributes:
const filledDefaults = {
  xmlns: 'http://www.w3.org/2000/svg',
  width: 24,
  height: 24,
  viewBox: '0 0 24 24',
  fill: 'currentColor',
  stroke: 'none'
};

Generated Component Features

Components created by createVueComponent have the same capabilities as built-in Tabler icons.

/**
 * Generated components support all standard icon props
 */
interface GeneratedIconProps extends IconProps {
  /** Size control (width and height) */
  size?: string | number; // Default: 24
  /** Color control (stroke for outline, fill for filled) */
  stroke?: string | number; // Default: 'currentColor'  
  /** Accessibility title */
  title?: string;
  /** CSS classes */
  class?: string | string[] | Record<string, boolean>;
  /** Style attributes */
  style?: string | Record<string, string>;
  /** All other SVG attributes */
  [key: string]: any;
}

Generated Component Usage Examples:

<template>
  <!-- Use custom component like any Tabler icon -->
  <IconCustomStar />
  
  <!-- With props -->
  <IconCustomStar 
    color="gold" 
    size="32" 
    stroke-width="1.5"
  />
  
  <!-- With events -->
  <IconCustomStar @click="handleStarClick" />
  
  <!-- With CSS classes -->
  <IconCustomStar class="favorite-star" />
</template>

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

const IconCustomStar = createVueComponent(
  'outline',
  'custom-star', 
  'CustomStar',
  [['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' }]]
);

function handleStarClick() {
  console.log('Custom star clicked');
}
</script>

CSS Class Generation

Custom components automatically receive CSS classes based on the provided iconName.

/**
 * Automatic CSS class generation for custom components
 * Classes follow the same pattern as built-in icons
 */
// Component created with iconName: 'custom-star'
// Receives classes: 'tabler-icon tabler-icon-custom-star'

// Component created with iconName: 'my-special-icon'  
// Receives classes: 'tabler-icon tabler-icon-my-special-icon'

CSS Styling for Custom Icons:

/* Style all custom icons */
.tabler-icon-custom-star {
  color: gold;
  transition: transform 0.2s ease;
}

.tabler-icon-custom-star:hover {
  transform: scale(1.1);
}

/* Style custom filled icons differently */
.tabler-icon[class*="custom-"] {
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1));
}

Integration with Icon Sets

createVueComponent can be used to integrate external icon sets or convert SVG files to Vue components.

Usage Examples:

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

// Convert Heroicons to Tabler-compatible components
const IconHeroHome = createVueComponent(
  'outline',
  'hero-home',
  'HeroHome',
  [['path', { 
    'stroke-linecap': 'round', 
    'stroke-linejoin': 'round', 
    'd': 'M3 7l3-3 6 6 6-6 3 3v13a1 1 0 01-1 1H4a1 1 0 01-1-1V7z'
  }]]
);

// Convert Feather icons
const IconFeatherEdit = createVueComponent(
  'outline',
  'feather-edit',
  'FeatherEdit', 
  [
    ['path', { d: 'M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7' }],
    ['path', { d: 'm18.5 2.5 a2.12 2.12 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z' }]
  ]
);

// Batch create icons from icon set data
function createIconsFromSet(iconSetData: Record<string, IconNode>) {
  const components: Record<string, Icon> = {};
  
  Object.entries(iconSetData).forEach(([name, iconNode]) => {
    const componentName = `Icon${name.charAt(0).toUpperCase()}${name.slice(1)}`;
    components[componentName] = createVueComponent('outline', name, componentName, iconNode);
  });
  
  return components;
}

Advanced Usage Patterns

Complex SVG icons with animations, gradients, or special effects can be created using the component factory.

Usage Examples:

// Icon with gradient (requires defs)
const IconGradientStar = createVueComponent(
  'filled',
  'gradient-star',
  'GradientStar',
  [
    ['defs', {}],
    ['linearGradient', { id: 'starGradient', x1: '0%', y1: '0%', x2: '100%', y2: '100%' }],
    ['stop', { offset: '0%', 'stop-color': '#ff6b6b' }],
    ['stop', { offset: '100%', 'stop-color': '#4ecdc4' }],
    ['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', fill: 'url(#starGradient)' }]
  ]
);

// Icon with animation attributes
const IconSpinner = createVueComponent(
  'outline',
  'spinner',
  'Spinner',
  [
    ['path', { 
      d: 'M12 3a9 9 0 0 1 9 9 9 9 0 0 1-9 9 9 9 0 0 1-9-9',
      'stroke-dasharray': '27',
      'stroke-dashoffset': '27'
    }]
  ]
);

Install with Tessl CLI