tessl/npm-tabler--icons-react

A set of free MIT-licensed high-quality SVG icons as React components for web projects.

—

Pending

Overview

Eval results

Files

Component Factory

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

The component factory provides utilities for creating custom icon components from SVG data. This is primarily used internally by the library but can be useful for creating custom icons that match the Tabler Icons component interface.

Capabilities

createReactComponent Function

Factory function for creating icon React components from SVG structure data.

/**
 * Creates a React component for an icon from SVG structure data
 * @param type - Icon style type ('outline' or 'filled')
 * @param iconName - Kebab-case icon name for CSS classes
 * @param iconNamePascal - PascalCase icon name for display name
 * @param iconNode - SVG element structure array
 * @returns Forward ref React component with IconProps interface
 */
function createReactComponent(
  type: 'outline' | 'filled',
  iconName: string,
  iconNamePascal: string,
  iconNode: IconNode
): TablerIcon;

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

type TablerIcon = ForwardRefExoticComponent<Omit<IconProps, "ref"> & RefAttributes<Icon>>;

type Icon = FunctionComponent<IconProps>;

interface IconProps extends Partial<Omit<React.ComponentPropsWithoutRef<'svg'>, 'stroke'>> {
  /** Icon size in pixels (width and height). Default: 24 */
  size?: string | number;
  /** Icon stroke width for outline icons. Default: 2 */
  stroke?: string | number;
  /** Icon color. For outline icons: sets stroke color. For filled icons: sets fill color. Default: 'currentColor' */
  color?: string;
  /** Accessible title for screen readers */
  title?: string;
}

Default Attributes

Configuration object containing default SVG attributes for different icon types.

const defaultAttributes: {
  outline: {
    xmlns: string;
    width: number;
    height: number;
    viewBox: string;
    fill: string;
    stroke: string;
    strokeWidth: number;
    strokeLinecap: string;
    strokeLinejoin: string;
  };
  filled: {
    xmlns: string;
    width: number;
    height: number;
    viewBox: string;
    fill: string;
    stroke: string;
  };
};

IconNode Structure

The IconNode type represents the internal SVG structure used by the component factory.

/**
 * Represents SVG elements as [tagName, attributes] pairs
 * Each icon is composed of an array of these element definitions
 */
type IconNode = [elementName: keyof ReactSVG, attrs: Record<string, string>][];

// Example IconNode for a simple icon:
const exampleIconNode: 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', key: 'svg-0' }],
  ['circle', { cx: '12', cy: '12', r: '3', key: 'svg-1' }]
];

Usage Examples

Creating a Custom Icon Component

import { createReactComponent, IconNode } from '@tabler/icons-react';

// Define the SVG structure for your custom icon
const customIconNode: 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',
    key: 'svg-0' 
  }]
];

// Create the component
const IconCustomStar = createReactComponent(
  'outline',
  'custom-star',
  'CustomStar',
  customIconNode
);

// Use the component
function MyComponent() {
  return <IconCustomStar size={32} color="gold" />;
}

Understanding Component Creation

The factory function handles several aspects of component creation:

// Internal behavior example (simplified)
function createReactComponent(type, iconName, iconNamePascal, iconNode) {
  const Component = forwardRef((props, ref) => {
    const { 
      color = 'currentColor', 
      size = 24, 
      stroke = 2, 
      title, 
      className, 
      children, 
      ...rest 
    } = props;
    
    return createElement('svg', {
      ref,
      ...defaultAttributes[type], // Apply default SVG attributes
      width: size,
      height: size,
      className: [`tabler-icon`, `tabler-icon-${iconName}`, className].join(' '),
      // Type-specific attributes
      ...(type === 'filled' 
        ? { fill: color }
        : { strokeWidth: stroke, stroke: color }
      ),
      ...rest
    }, [
      // Optional title for accessibility
      title && createElement('title', { key: 'svg-title' }, title),
      // Render SVG elements from iconNode
      ...iconNode.map(([tag, attrs]) => createElement(tag, attrs)),
      // Additional children
      ...(Array.isArray(children) ? children : [children])
    ]);
  });
  
  Component.displayName = iconNamePascal;
  return Component;
}

Working with IconNode Data

IconNode arrays represent SVG elements in a structured format:

// Example: Converting SVG to IconNode
// Original SVG:
// <svg>
//   <path d="M12 2L22 22H2L12 2Z" />
//   <circle cx="12" cy="16" r="2" />
// </svg>

const triangleWithDotNode: IconNode = [
  ['path', { d: 'M12 2L22 22H2L12 2Z', key: 'svg-0' }],
  ['circle', { cx: '12', cy: '16', r: '2', key: 'svg-1' }]
];

const IconTriangleWithDot = createReactComponent(
  'outline',
  'triangle-with-dot',
  'TriangleWithDot',
  triangleWithDotNode
);

Creating Filled Icon Variants

// Filled version of a custom icon
const filledStarNode: 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',
    fill: 'currentColor',
    key: 'svg-0' 
  }]
];

const IconCustomStarFilled = createReactComponent(
  'filled',
  'custom-star',
  'CustomStarFilled',
  filledStarNode
);

Component Behavior

Generated Component Features

Components created by createReactComponent include:

Forward Ref Support: Full compatibility with React ref forwarding
Type Safety: Complete TypeScript integration with proper prop types
CSS Classes: Automatic application of tabler-icon and icon-specific classes
Default Attributes: Consistent SVG attributes for proper rendering
Accessibility: Support for title attributes and screen readers
Customization: All standard SVG props can be passed through

Default Attribute Application

The factory applies different default attributes based on icon type:

Outline Icons (type: 'outline'):

fill: 'none'
stroke: 'currentColor' (overrideable via props)
strokeWidth: 2 (overrideable via stroke prop)
strokeLinecap: 'round'
strokeLinejoin: 'round'

Filled Icons (type: 'filled'):

fill: 'currentColor' (overrideable via color prop)
stroke: 'none'

CSS Class Generation

Generated components receive CSS classes for styling:

/* Base class for all Tabler icons */
.tabler-icon {
  /* Base styles */
}

/* Specific icon class */
.tabler-icon-custom-star {
  /* Icon-specific styles */
}

Advanced Usage

Extending Existing Icons

You can create variations of existing icons by modifying their IconNode data:

// Note: This is conceptual - actual IconNode data is not exported
// You would need to recreate the SVG structure

const modifiedHomeNode: IconNode = [
  // Original home icon paths...
  ['path', { d: 'M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z', key: 'svg-0' }],
  ['polyline', { points: '9,22 9,12 15,12 15,22', key: 'svg-1' }],
  // Add a custom overlay
  ['circle', { cx: '18', cy: '6', r: '3', fill: 'red', key: 'svg-2' }]
];

const IconHomeWithNotification = createReactComponent(
  'outline',
  'home-with-notification',
  'HomeWithNotification',
  modifiedHomeNode
);

Integration with Icon Libraries

The component factory allows you to create icons that seamlessly integrate with the Tabler Icons ecosystem:

// Your custom icons will work exactly like built-in icons
const customIcons = {
  IconCustomStar,
  IconCustomStarFilled,
  IconTriangleWithDot
};

// Same interface as built-in icons
function IconGrid({ icons }: { icons: React.ComponentType<IconProps>[] }) {
  return (
    <div>
      {icons.map((Icon, index) => (
        <Icon key={index} size={24} />
      ))}
    </div>
  );
}

Install with Tessl CLI

npx tessl i tessl/npm-tabler--icons-react

docs

tessl/npm-tabler--icons-react