tessl/npm-tabler--icons

Comprehensive ecosystem of 5,945 free MIT-licensed SVG icons with framework components for React, Vue, Svelte and raw SVG files.

—

Pending

Overview

Eval results

Files

React Components

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

React component library providing tree-shakable components for all 5,945 Tabler Icons with full TypeScript support. Each icon is available as an optimized React component with consistent prop interfaces and forwardRef support.

Package Information

Package Name: @tabler/icons-react
Installation: npm install @tabler/icons-react
Peer Dependencies: React >= 16

Core Imports

import { IconHome, IconHeart, IconArrowLeft } from '@tabler/icons-react';

Capabilities

Icon Component Import

Tree-shakable imports for individual icon components with full TypeScript support.

/**
 * Individual icon component imports
 * Pattern: Icon{PascalCaseName} for outline icons
 * Pattern: Icon{PascalCaseName}Filled for filled icons
 */
import { IconHome } from '@tabler/icons-react';
import { IconHeart } from '@tabler/icons-react';
import { IconHeartFilled } from '@tabler/icons-react';
import { IconArrowLeft } from '@tabler/icons-react';

interface IconProps extends Partial<Omit<React.ComponentPropsWithoutRef<'svg'>, 'stroke'>> {
  /** Icon size in pixels */
  size?: string | number;
  /** Icon stroke color */
  stroke?: string | number;
  /** Accessible title for the icon */
  title?: string;
  /** Icon stroke color (alias for stroke) */
  color?: string;
  /** CSS class name */
  className?: string;
}

type TablerIcon = React.ForwardRefExoticComponent<Omit<IconProps, "ref"> & React.RefAttributes<React.ComponentRef<'svg'>>>;

Usage Examples:

import React from 'react';
import { IconHome, IconHeart, IconArrowLeft } from '@tabler/icons-react';

function MyComponent() {
  return (
    <div>
      {/* Basic usage */}
      <IconHome />
      
      {/* With custom props */}
      <IconHeart 
        size={32} 
        color="red" 
        stroke={1.5}
        className="heart-icon"
      />
      
      {/* With title for accessibility */}
      <IconArrowLeft 
        size={24} 
        title="Go back"
        onClick={() => history.back()}
      />
      
      {/* Forward ref usage */}
      <IconHome ref={iconRef} />
    </div>
  );
}

Icon Component Props

Comprehensive prop interface for customizing icon appearance and behavior.

interface IconProps extends Partial<Omit<React.ComponentPropsWithoutRef<'svg'>, 'stroke'>> {
  /** 
   * Icon size in pixels (applies to both width and height) 
   * @default 24
   */
  size?: string | number;
  
  /** 
   * Icon stroke color (outline icons) or fill color (filled icons)
   * @default "currentColor"
   */
  stroke?: string | number;
  
  /** 
   * Alias for stroke prop - icon color
   * @default "currentColor" 
   */
  color?: string;
  
  /** 
   * Accessible title element for the icon
   * Renders as <title> element inside SVG
   */
  title?: string;
  
  /** 
   * CSS class name applied to the SVG element
   * Automatically includes 'tabler-icon' and 'tabler-icon-{icon-name}' classes
   */
  className?: string;
  
  /** All other SVG element props are supported */
  onClick?: React.MouseEventHandler<SVGSVGElement>;
  onMouseEnter?: React.MouseEventHandler<SVGSVGElement>;
  style?: React.CSSProperties;
  'aria-label'?: string;
  'data-testid'?: string;
}

Usage Examples:

import { IconSettings, IconUser } from '@tabler/icons-react';

function PropsExamples() {
  return (
    <div>
      {/* Size variations */}
      <IconUser size={16} />  {/* Small */}
      <IconUser size={24} />  {/* Default */}
      <IconUser size={32} />  {/* Large */}
      <IconUser size="2rem" /> {/* CSS units */}
      
      {/* Color variations */}
      <IconSettings color="#3b82f6" />
      <IconSettings stroke="rgb(239, 68, 68)" />
      <IconSettings style={{ color: 'var(--primary-color)' }} />
      
      {/* Accessibility */}
      <IconSettings 
        title="Application Settings"
        aria-label="Open settings menu"
      />
      
      {/* Event handlers */}
      <IconSettings 
        onClick={() => setShowSettings(true)}
        onMouseEnter={() => setHover(true)}
        style={{ cursor: 'pointer' }}
      />
      
      {/* CSS classes */}
      <IconSettings className="settings-icon rotating" />
      
      {/* Data attributes for testing */}
      <IconSettings data-testid="settings-button" />
    </div>
  );
}

Outline vs Filled Variants

Access to both outline (stroke-based) and filled (solid) icon variants with different naming conventions.

/**
 * Icon naming conventions:
 * - Outline icons: Icon{PascalCaseName} (default style)
 * - Filled icons: Icon{PascalCaseName}Filled
 * 
 * Examples:
 * - IconHome (outline) vs IconHomeFilled (filled)
 * - IconHeart (outline) vs IconHeartFilled (filled)
 * - IconStar (outline) vs IconStarFilled (filled)
 */

// Outline icons (4,964 available)
import { 
  IconHome,
  IconHeart, 
  IconStar,
  IconUser,
  IconSettings
} from '@tabler/icons-react';

// Filled icons (981 available) 
import {
  IconHomeFilled,
  IconHeartFilled,
  IconStarFilled,
  IconUserFilled,
  IconSettingsFilled
} from '@tabler/icons-react';

Usage Examples:

import { 
  IconHeart, 
  IconHeartFilled,
  IconStar,
  IconStarFilled 
} from '@tabler/icons-react';

function IconVariants() {
  const [isFavorite, setIsFavorite] = useState(false);
  const [rating, setRating] = useState(0);
  
  return (
    <div>
      {/* Toggle between outline and filled */}
      <button onClick={() => setIsFavorite(!isFavorite)}>
        {isFavorite ? (
          <IconHeartFilled color="red" />
        ) : (
          <IconHeart color="gray" />
        )}
      </button>
      
      {/* Star rating component */}
      <div className="rating">
        {[1, 2, 3, 4, 5].map(value => (
          <button key={value} onClick={() => setRating(value)}>
            {value <= rating ? (
              <IconStarFilled color="gold" />
            ) : (
              <IconStar color="gray" />
            )}
          </button>
        ))}
      </div>
    </div>
  );
}

TypeScript Integration

Full TypeScript support with proper type definitions and component interfaces.

/**
 * TypeScript definitions for React components
 */
import type { ComponentPropsWithoutRef, RefAttributes, ForwardRefExoticComponent } from 'react';

// Core types
export interface IconProps extends Partial<Omit<ComponentPropsWithoutRef<'svg'>, 'stroke'>> {
  size?: string | number;
  stroke?: string | number;
  color?: string;
  title?: string;
  className?: string;
}

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

// Individual icon exports with proper typing
export const IconHome: TablerIcon;
export const IconHeart: TablerIcon;
export const IconHeartFilled: TablerIcon;
export const IconArrowLeft: TablerIcon;
// ... 5,945 total icon exports

Usage Examples:

import React, { forwardRef, useRef } from 'react';
import { IconHome, IconProps, TablerIcon } from '@tabler/icons-react';

// Using IconProps type
function CustomIcon(props: IconProps) {
  return <IconHome {...props} />;
}

// Using TablerIcon type
const StyledIcon: TablerIcon = forwardRef<SVGSVGElement, IconProps>((props, ref) => {
  return <IconHome ref={ref} className="styled-icon" {...props} />;
});

// Ref usage with proper typing
function RefExample() {
  const iconRef = useRef<SVGSVGElement>(null);
  
  const handleClick = () => {
    if (iconRef.current) {
      iconRef.current.style.transform = 'rotate(360deg)';
    }
  };
  
  return (
    <IconHome 
      ref={iconRef} 
      onClick={handleClick}
      style={{ transition: 'transform 0.3s' }}
    />
  );
}

// Props with strict typing
interface ButtonProps {
  icon: TablerIcon;
  iconProps?: IconProps;
  children: React.ReactNode;
}

function IconButton({ icon: Icon, iconProps, children }: ButtonProps) {
  return (
    <button>
      <Icon size={16} {...iconProps} />
      {children}
    </button>
  );
}

Framework Integration Patterns

Common patterns for integrating React icon components with popular frameworks and libraries.

/**
 * Common integration patterns for React ecosystems
 */

// Next.js integration
import dynamic from 'next/dynamic';
const IconHome = dynamic(() => import('@tabler/icons-react').then(mod => ({ default: mod.IconHome })));

// Styled-components integration  
import styled from 'styled-components';
const StyledIcon = styled(IconHome)`
  color: ${props => props.theme.primary};
  transition: color 0.2s;
`;

// Material-UI integration
import { SvgIcon } from '@mui/material';
const MuiTablerIcon = (props) => (
  <SvgIcon component={IconHome} inheritViewBox {...props} />
);

Usage Examples:

// Next.js App Router
import { IconHome, IconUser } from '@tabler/icons-react';

export default function HomePage() {
  return (
    <main>
      <IconHome size={32} />
      <h1>Welcome Home</h1>
    </main>
  );
}

// Styled Components
import styled from 'styled-components';
import { IconSettings } from '@tabler/icons-react';

const SettingsButton = styled.button`
  display: flex;
  align-items: center;
  gap: 8px;
  
  svg {
    transition: transform 0.2s;
  }
  
  &:hover svg {
    transform: rotate(90deg);
  }
`;

function Settings() {
  return (
    <SettingsButton>
      <IconSettings size={20} />
      Settings
    </SettingsButton>
  );
}

// React Hook Form integration
import { useForm } from 'react-hook-form';
import { IconUser, IconMail, IconLock } from '@tabler/icons-react';

function LoginForm() {
  const { register } = useForm();
  
  return (
    <form>
      <div className="field">
        <IconUser size={20} />
        <input {...register('username')} placeholder="Username" />
      </div>
      <div className="field">
        <IconMail size={20} />
        <input {...register('email')} type="email" placeholder="Email" />
      </div>
      <div className="field">
        <IconLock size={20} />
        <input {...register('password')} type="password" placeholder="Password" />
      </div>
    </form>
  );
}

Common Usage Patterns

Icon Button Components

Create reusable icon button components with consistent styling and behavior.

import React from 'react';
import { TablerIcon, IconProps } from '@tabler/icons-react';

interface IconButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
  icon: TablerIcon;
  iconProps?: IconProps;
  variant?: 'primary' | 'secondary' | 'ghost';
  size?: 'sm' | 'md' | 'lg';
}

export function IconButton({ 
  icon: Icon, 
  iconProps, 
  variant = 'primary',
  size = 'md',
  className,
  children,
  ...props 
}: IconButtonProps) {
  const iconSize = size === 'sm' ? 16 : size === 'lg' ? 24 : 20;
  
  return (
    <button 
      className={`icon-button icon-button--${variant} icon-button--${size} ${className}`}
      {...props}
    >
      <Icon size={iconSize} {...iconProps} />
      {children}
    </button>
  );
}

// Usage
import { IconTrash, IconEdit, IconPlus } from '@tabler/icons-react';

function ActionButtons() {
  return (
    <div className="actions">
      <IconButton icon={IconPlus} variant="primary">
        Add Item
      </IconButton>
      <IconButton icon={IconEdit} variant="secondary">
        Edit
      </IconButton>
      <IconButton icon={IconTrash} variant="ghost" iconProps={{ color: 'red' }}>
        Delete
      </IconButton>
    </div>
  );
}

Dynamic Icon Loading

Load icons dynamically based on string identifiers with TypeScript safety.

import React from 'react';
import * as TablerIcons from '@tabler/icons-react';

type IconName = keyof typeof TablerIcons;

interface DynamicIconProps extends Omit<React.ComponentProps<'svg'>, 'ref'> {
  name: IconName;
  size?: number;
  color?: string;
}

export function DynamicIcon({ name, size = 24, color = 'currentColor', ...props }: DynamicIconProps) {
  const Icon = TablerIcons[name] as TablerIcons.TablerIcon;
  
  if (!Icon) {
    console.warn(`Icon "${name}" not found`);
    return null;
  }
  
  return <Icon size={size} color={color} {...props} />;
}

// Usage with type safety
function IconDemo() {
  return (
    <div>
      <DynamicIcon name="IconHome" size={32} />
      <DynamicIcon name="IconUser" color="blue" />
      <DynamicIcon name="IconSettings" className="rotating" />
      {/* TypeScript will error on invalid icon names */}
      {/* <DynamicIcon name="InvalidIcon" /> */}
    </div>
  );
}

Performance Optimization

Best practices for optimizing icon performance in large applications.

import React, { memo, useMemo } from 'react';
import { IconHome, IconUser, IconSettings } from '@tabler/icons-react';

// Memoized icon component to prevent unnecessary re-renders
const MemoizedIcon = memo(function MemoizedIcon({ 
  name, 
  ...props 
}: { name: string } & React.ComponentProps<'svg'>) {
  const Icon = useMemo(() => {
    switch (name) {
      case 'home': return IconHome;
      case 'user': return IconUser;
      case 'settings': return IconSettings;
      default: return null;
    }
  }, [name]);
  
  if (!Icon) return null;
  return <Icon {...props} />;
});

// Icon registry for code splitting
const iconRegistry = {
  home: () => import('@tabler/icons-react').then(mod => mod.IconHome),
  user: () => import('@tabler/icons-react').then(mod => mod.IconUser),
  settings: () => import('@tabler/icons-react').then(mod => mod.IconSettings),
};

// Lazy loaded icon component
function LazyIcon({ name, ...props }: { name: keyof typeof iconRegistry }) {
  const [Icon, setIcon] = React.useState<React.ComponentType | null>(null);
  
  React.useEffect(() => {
    iconRegistry[name]().then(setIcon);
  }, [name]);
  
  if (!Icon) return <div className="icon-placeholder" />;
  return <Icon {...props} />;
}

Install with Tessl CLI