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

Icon Metadata

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

Complete metadata system providing comprehensive information about all 5,945 icons including categories, tags, unicode values, version data, and style variant availability.

Capabilities

Icons Metadata File

Access to complete icon metadata for programmatic icon management and discovery.

/**
 * Complete icon metadata import
 * Contains metadata for all 5,945 icons in a structured format
 */
import iconsData from "@tabler/icons/icons.json";

interface IconsData {
  [iconName: string]: IconMetadata;
}

interface IconMetadata {
  name: string;
  category: string;
  tags: string[];
  styles: {
    outline?: StyleInfo;
    filled?: StyleInfo;
  };
}

interface StyleInfo {
  version: string;
  unicode: string;
}

Usage Examples:

import iconsData from "@tabler/icons/icons.json";

// Access specific icon metadata
const homeIcon = iconsData.home;
console.log(homeIcon.category); // "Buildings"
console.log(homeIcon.tags); // ["house", "building", "residence"]

// Check available styles
const hasOutline = homeIcon.styles.outline !== undefined;
const hasFilled = homeIcon.styles.filled !== undefined;

// Get version and unicode information
const outlineVersion = homeIcon.styles.outline?.version; // "1.0"
const outlineUnicode = homeIcon.styles.outline?.unicode; // "ea44"

Category-based Filtering

Filter and organize icons by their categorical classification.

/**
 * Filter icons by category
 * @param iconsData - Complete icons metadata object
 * @param categoryName - Category name to filter by
 * @returns Array of icons in the specified category
 */
function getIconsByCategory(iconsData: IconsData, categoryName: string): IconMetadata[];

Usage Examples:

import iconsData from "@tabler/icons/icons.json";

// Get all icons in a specific category
const designIcons = Object.values(iconsData).filter(icon => 
  icon.category === 'Design'
);

const communicationIcons = Object.values(iconsData).filter(icon => 
  icon.category === 'Communication'
);

// Get all available categories
const categories = [...new Set(Object.values(iconsData).map(icon => icon.category))];

// Count icons per category
const categoryCounts = categories.reduce((acc, category) => {
  acc[category] = Object.values(iconsData).filter(icon => 
    icon.category === category
  ).length;
  return acc;
}, {});

Tag-based Search

Search and filter icons using their associated tags for semantic discovery.

/**
 * Search icons by tags
 * @param iconsData - Complete icons metadata object
 * @param searchTag - Tag to search for
 * @returns Array of icons containing the specified tag
 */
function getIconsByTag(iconsData: IconsData, searchTag: string): IconMetadata[];

/**
 * Search icons by multiple tags (AND operation)
 * @param iconsData - Complete icons metadata object
 * @param searchTags - Array of tags that must all be present
 * @returns Array of icons containing all specified tags
 */
function getIconsByTags(iconsData: IconsData, searchTags: string[]): IconMetadata[];

Usage Examples:

import iconsData from "@tabler/icons/icons.json";

// Find icons with specific tag
const arrowIcons = Object.values(iconsData).filter(icon =>
  icon.tags.includes('arrow')
);

const userIcons = Object.values(iconsData).filter(icon =>
  icon.tags.includes('user')
);

// Find icons with multiple tags (AND)
const userManagementIcons = Object.values(iconsData).filter(icon =>
  icon.tags.includes('user') && icon.tags.includes('management')
);

// Find icons with any of multiple tags (OR)
const socialIcons = Object.values(iconsData).filter(icon =>
  ['social', 'share', 'communication'].some(tag => icon.tags.includes(tag))
);

// Get all unique tags
const allTags = [...new Set(Object.values(iconsData).flatMap(icon => icon.tags))];

Style Availability Check

Determine which style variants are available for specific icons.

/**
 * Check style availability for icons
 * @param iconMetadata - Metadata for a specific icon
 * @returns Object indicating available styles
 */
interface StyleAvailability {
  hasOutline: boolean;
  hasFilled: boolean;
  bothStyles: boolean;
  outlineOnly: boolean;
  filledOnly: boolean;
}

function getStyleAvailability(iconMetadata: IconMetadata): StyleAvailability;

Usage Examples:

import iconsData from "@tabler/icons/icons.json";

// Check styles for specific icon
const homeIcon = iconsData.home;
const homeStyles = {
  hasOutline: homeIcon.styles.outline !== undefined,
  hasFilled: homeIcon.styles.filled !== undefined,
  bothStyles: homeIcon.styles.outline !== undefined && homeIcon.styles.filled !== undefined,
  outlineOnly: homeIcon.styles.outline !== undefined && homeIcon.styles.filled === undefined,
  filledOnly: homeIcon.styles.outline === undefined && homeIcon.styles.filled !== undefined
};

// Find icons available in both styles
const dualStyleIcons = Object.values(iconsData).filter(icon =>
  icon.styles.outline !== undefined && icon.styles.filled !== undefined
);

// Find outline-only icons
const outlineOnlyIcons = Object.values(iconsData).filter(icon =>
  icon.styles.outline !== undefined && icon.styles.filled === undefined
);

// Find filled-only icons
const filledOnlyIcons = Object.values(iconsData).filter(icon =>
  icon.styles.outline === undefined && icon.styles.filled !== undefined
);

Version and Unicode Information

Access version history and unicode codepoints for each icon style.

/**
 * Version and unicode information for icon styles
 */
interface StyleInfo {
  /** Version when this style was introduced or last modified */
  version: string;
  /** Unicode codepoint in hexadecimal format */
  unicode: string;
}

/**
 * Get unicode codepoint as number
 * @param unicodeHex - Hexadecimal unicode string
 * @returns Decimal unicode value
 */
function parseUnicode(unicodeHex: string): number;

Usage Examples:

import iconsData from "@tabler/icons/icons.json";

// Get version information
const homeIcon = iconsData.home;
const outlineVersion = homeIcon.styles.outline?.version; // "1.0"
const filledVersion = homeIcon.styles.filled?.version; // "2.3"

// Get unicode information
const outlineUnicode = homeIcon.styles.outline?.unicode; // "ea44"
const filledUnicode = homeIcon.styles.filled?.unicode; // "f6eb"

// Convert unicode to decimal
const outlineCodepoint = parseInt(outlineUnicode, 16); // 60004
const filledCodepoint = parseInt(filledUnicode, 16); // 63211

// Find icons by version
const latestIcons = Object.values(iconsData).filter(icon =>
  (icon.styles.outline?.version === "3.34" || icon.styles.filled?.version === "3.34")
);

// Generate unicode character
const unicodeChar = String.fromCharCode(outlineCodepoint);

Common Usage Patterns

Icon Discovery Interface

Build icon picker interfaces using metadata for searching and categorization.

import iconsData from "@tabler/icons/icons.json";

// Icon picker data structure
const iconPickerData = {
  categories: [...new Set(Object.values(iconsData).map(icon => icon.category))],
  tags: [...new Set(Object.values(iconsData).flatMap(icon => icon.tags))],
  icons: Object.values(iconsData)
};

// Search function for icon picker
function searchIcons(query) {
  const lowerQuery = query.toLowerCase();
  return Object.values(iconsData).filter(icon =>
    icon.name.includes(lowerQuery) ||
    icon.category.toLowerCase().includes(lowerQuery) ||
    icon.tags.some(tag => tag.toLowerCase().includes(lowerQuery))
  );
}

// Category navigation
function getIconsByCategory(category) {
  return Object.values(iconsData).filter(icon => icon.category === category);
}

Dynamic Icon Loading

Combine metadata with dynamic loading for efficient icon management.

import iconsData from "@tabler/icons/icons.json";

// Load icon with fallback
async function loadIconWithFallback(iconName, preferredStyle = 'outline') {
  const iconMeta = iconsData[iconName];
  if (!iconMeta) {
    throw new Error(`Icon "${iconName}" not found`);
  }

  // Check preferred style availability
  const hasPreferred = iconMeta.styles[preferredStyle] !== undefined;
  const fallbackStyle = preferredStyle === 'outline' ? 'filled' : 'outline';
  const hasFallback = iconMeta.styles[fallbackStyle] !== undefined;

  const styleToUse = hasPreferred ? preferredStyle : 
                     hasFallback ? fallbackStyle : null;

  if (!styleToUse) {
    throw new Error(`No styles available for icon "${iconName}"`);
  }

  return await import(`@tabler/icons/${styleToUse}/${iconName}.svg`);
}

// Preload icons by category
async function preloadCategoryIcons(category, style = 'outline') {
  const categoryIcons = Object.values(iconsData).filter(icon =>
    icon.category === category && icon.styles[style] !== undefined
  );

  const loadPromises = categoryIcons.map(icon =>
    import(`@tabler/icons/${style}/${icon.name}.svg`)
  );

  return await Promise.all(loadPromises);
}

Icon Statistics

Generate statistics and insights about the icon library.

import iconsData from "@tabler/icons/icons.json";

// Library statistics
const stats = {
  totalIcons: Object.keys(iconsData).length,
  outlineIcons: Object.values(iconsData).filter(icon => 
    icon.styles.outline !== undefined).length,
  filledIcons: Object.values(iconsData).filter(icon => 
    icon.styles.filled !== undefined).length,
  dualStyleIcons: Object.values(iconsData).filter(icon =>
    icon.styles.outline !== undefined && icon.styles.filled !== undefined).length,
  categories: [...new Set(Object.values(iconsData).map(icon => icon.category))].length,
  totalTags: [...new Set(Object.values(iconsData).flatMap(icon => icon.tags))].length
};

// Category distribution
const categoryDistribution = Object.values(iconsData).reduce((acc, icon) => {
  acc[icon.category] = (acc[icon.category] || 0) + 1;
  return acc;
}, {});

// Tag popularity
const tagPopularity = Object.values(iconsData)
  .flatMap(icon => icon.tags)
  .reduce((acc, tag) => {
    acc[tag] = (acc[tag] || 0) + 1;
    return acc;
  }, {});

Install with Tessl CLI