CtrlK
BlogDocsLog inGet started
Tessl Logo

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

svg-data.mddocs/

Programmatic SVG Data

Access to raw SVG path data for programmatic icon rendering, custom SVG generation, and framework integration. This API provides the underlying path elements that make up each icon for maximum flexibility in rendering.

Capabilities

Outline SVG Path Data

Access to SVG path data for all outline icons for programmatic rendering.

/**
 * Outline icons SVG path data
 * Contains path elements for all 4,964 outline icons
 */
import outlineNodes from "@tabler/icons/tabler-nodes-outline.json";

type SVGPathElement = [string, Record<string, string>];
type IconPathData = SVGPathElement[];

interface OutlineNodesData {
  [iconName: string]: IconPathData;
}

Usage Examples:

import outlineNodes from "@tabler/icons/tabler-nodes-outline.json";

// Access path data for specific icon
const homePaths = outlineNodes.home;
console.log(homePaths);
// [
//   ["path", {"d": "m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"}],
//   ["polyline", {"points": "9,22 9,12 15,12 15,22"}]
// ]

// Generate SVG programmatically
function createOutlineSVG(iconName, options = {}) {
  const paths = outlineNodes[iconName];
  if (!paths) return null;

  const {
    width = 24,
    height = 24,
    strokeWidth = 2,
    stroke = 'currentColor',
    fill = 'none'
  } = options;

  const pathElements = paths.map(([tag, attrs]) => {
    const attrString = Object.entries(attrs)
      .map(([key, value]) => `${key}="${value}"`)
      .join(' ');
    return `<${tag} ${attrString}/>`;
  }).join('\n  ');

  return `<svg xmlns="http://www.w3.org/2000/svg" 
    width="${width}" height="${height}" 
    viewBox="0 0 24 24" 
    fill="${fill}" 
    stroke="${stroke}" 
    stroke-width="${strokeWidth}" 
    stroke-linecap="round" 
    stroke-linejoin="round">
  ${pathElements}
</svg>`;
}

Filled SVG Path Data

Access to SVG path data for all filled icons for programmatic rendering.

/**
 * Filled icons SVG path data
 * Contains path elements for all 981 filled icons
 */
import filledNodes from "@tabler/icons/tabler-nodes-filled.json";

interface FilledNodesData {
  [iconName: string]: IconPathData;
}

Usage Examples:

import filledNodes from "@tabler/icons/tabler-nodes-filled.json";

// Access filled icon path data
const heartPaths = filledNodes.heart;
console.log(heartPaths);
// [
//   ["path", {"d": "M19.5 12.572l-7.5 7.428l-7.5 -7.428a5 5 0 1 1 7.5 -6.566a5 5 0 1 1 7.5 6.566"}]
// ]

// Generate filled SVG programmatically
function createFilledSVG(iconName, options = {}) {
  const paths = filledNodes[iconName];
  if (!paths) return null;

  const {
    width = 24,
    height = 24,
    fill = 'currentColor'
  } = options;

  const pathElements = paths.map(([tag, attrs]) => {
    const attrString = Object.entries(attrs)
      .map(([key, value]) => `${key}="${value}"`)
      .join(' ');
    return `<${tag} ${attrString}/>`;
  }).join('\n  ');

  return `<svg xmlns="http://www.w3.org/2000/svg" 
    width="${width}" height="${height}" 
    viewBox="0 0 24 24" 
    fill="${fill}">
  ${pathElements}
</svg>`;
}

Custom SVG Generation

Create custom SVG elements with modified properties and styling.

/**
 * Generate custom SVG with modified properties
 * @param iconName - Name of the icon
 * @param style - Icon style ('outline' or 'filled')
 * @param options - Customization options
 * @returns Generated SVG string or null if icon not found
 */
function generateCustomSVG(
  iconName: string, 
  style: 'outline' | 'filled', 
  options: SVGOptions
): string | null;

interface SVGOptions {
  width?: number;
  height?: number;
  strokeWidth?: number;
  stroke?: string;
  fill?: string;
  className?: string;
  id?: string;
  viewBox?: string;
}

Usage Examples:

import outlineNodes from "@tabler/icons/tabler-nodes-outline.json";
import filledNodes from "@tabler/icons/tabler-nodes-filled.json";

// Comprehensive SVG generator
function generateCustomSVG(iconName, style, options = {}) {
  const nodesData = style === 'outline' ? outlineNodes : filledNodes;
  const paths = nodesData[iconName];
  
  if (!paths) {
    console.warn(`Icon "${iconName}" not found in ${style} style`);
    return null;
  }

  const {
    width = 24,
    height = 24,
    strokeWidth = 2,
    stroke = 'currentColor',
    fill = style === 'outline' ? 'none' : 'currentColor',
    className = '',
    id = '',
    viewBox = '0 0 24 24'
  } = options;

  const pathElements = paths.map(([tag, attrs]) => {
    const attrString = Object.entries(attrs)
      .map(([key, value]) => `${key}="${value}"`)
      .join(' ');
    return `<${tag} ${attrString}/>`;
  }).join('\n  ');

  const svgAttributes = [
    'xmlns="http://www.w3.org/2000/svg"',
    `width="${width}"`,
    `height="${height}"`,
    `viewBox="${viewBox}"`,
    style === 'outline' ? `fill="${fill}"` : null,
    style === 'outline' ? `stroke="${stroke}"` : null,
    style === 'outline' ? `stroke-width="${strokeWidth}"` : null,
    style === 'outline' ? 'stroke-linecap="round"' : null,
    style === 'outline' ? 'stroke-linejoin="round"' : null,
    style === 'filled' ? `fill="${fill}"` : null,
    className ? `class="${className}"` : null,
    id ? `id="${id}"` : null
  ].filter(Boolean).join(' ');

  return `<svg ${svgAttributes}>
  ${pathElements}
</svg>`;
}

// Usage examples
const customHome = generateCustomSVG('home', 'outline', {
  width: 32,
  height: 32,
  strokeWidth: 1.5,
  stroke: '#3b82f6',
  className: 'icon-home'
});

const customHeart = generateCustomSVG('heart', 'filled', {
  width: 20,
  height: 20,
  fill: '#ef4444',
  id: 'heart-icon'
});

Framework Integration Helpers

Utility functions for integrating with popular frontend frameworks.

/**
 * React component generator
 * @param iconName - Name of the icon
 * @param style - Icon style
 * @param props - React props
 * @returns React component string or JSX element
 */
function createReactIcon(iconName: string, style: 'outline' | 'filled', props?: object): string;

/**
 * Vue component generator
 * @param iconName - Name of the icon
 * @param style - Icon style
 * @param props - Vue props
 * @returns Vue component template
 */
function createVueIcon(iconName: string, style: 'outline' | 'filled', props?: object): string;

/**
 * Web Components generator
 * @param iconName - Name of the icon
 * @param style - Icon style
 * @param attributes - HTML attributes
 * @returns Custom element definition
 */
function createWebComponent(iconName: string, style: 'outline' | 'filled', attributes?: object): string;

Usage Examples:

import outlineNodes from "@tabler/icons/tabler-nodes-outline.json";

// React component generator
function createReactIcon(iconName, style, props = {}) {
  const nodesData = style === 'outline' ? outlineNodes : filledNodes;
  const paths = nodesData[iconName];
  
  if (!paths) return null;

  const {
    size = 24,
    color = 'currentColor',
    strokeWidth = 2,
    className = '',
    ...otherProps
  } = props;

  const pathElements = paths.map(([tag, attrs], index) => {
    const attrString = Object.entries(attrs)
      .map(([key, value]) => `${key}="${value}"`)
      .join(' ');
    return `<${tag} key={${index}} ${attrString} />`;
  }).join('\n    ');

  return `
import React from 'react';

export const ${iconName.charAt(0).toUpperCase() + iconName.slice(1)}Icon = (props) => (
  <svg
    xmlns="http://www.w3.org/2000/svg"
    width={props.size || ${size}}
    height={props.size || ${size}}
    viewBox="0 0 24 24"
    fill="${style === 'filled' ? color : 'none'}"
    stroke="${style === 'outline' ? color : 'none'}"
    strokeWidth={props.strokeWidth || ${strokeWidth}}
    strokeLinecap="round"
    strokeLinejoin="round"
    className={props.className || "${className}"}
    {...props}
  >
    ${pathElements}
  </svg>
);`;
}

// Vue component generator
function createVueIcon(iconName, style, props = {}) {
  const nodesData = style === 'outline' ? outlineNodes : filledNodes;
  const paths = nodesData[iconName];
  
  if (!paths) return null;

  const pathElements = paths.map(([tag, attrs]) => {
    const attrString = Object.entries(attrs)
      .map(([key, value]) => `${key}="${value}"`)
      .join(' ');
    return `    <${tag} ${attrString} />`;
  }).join('\n');

  return `
<template>
  <svg
    xmlns="http://www.w3.org/2000/svg"
    :width="size"
    :height="size"
    viewBox="0 0 24 24"
    :fill="${style === 'filled' ? 'color' : 'none'}"
    :stroke="${style === 'outline' ? 'color' : 'none'}"
    :stroke-width="strokeWidth"
    stroke-linecap="round"
    stroke-linejoin="round"
    :class="className"
  >
${pathElements}
  </svg>
</template>

<script>
export default {
  name: '${iconName.charAt(0).toUpperCase() + iconName.slice(1)}Icon',
  props: {
    size: { type: [Number, String], default: 24 },
    color: { type: String, default: 'currentColor' },
    strokeWidth: { type: [Number, String], default: 2 },
    className: { type: String, default: '' }
  }
};
</script>`;
}

Path Data Analysis

Analyze and extract information from SVG path data.

/**
 * Analyze icon complexity based on path data
 * @param pathData - Array of SVG path elements
 * @returns Analysis object with complexity metrics
 */
function analyzeIconComplexity(pathData: IconPathData): IconComplexity;

interface IconComplexity {
  elementCount: number;
  pathCount: number;
  totalPathLength: number;
  hasMultiplePaths: boolean;
  elementTypes: string[];
  boundingBox?: BoundingBox;
}

interface BoundingBox {
  minX: number;
  minY: number;
  maxX: number;
  maxY: number;
  width: number;
  height: number;
}

Usage Examples:

import outlineNodes from "@tabler/icons/tabler-nodes-outline.json";

// Analyze icon complexity
function analyzeIconComplexity(pathData) {
  const elementCount = pathData.length;
  const pathCount = pathData.filter(([tag]) => tag === 'path').length;
  const elementTypes = [...new Set(pathData.map(([tag]) => tag))];
  
  const totalPathLength = pathData
    .filter(([tag]) => tag === 'path')
    .reduce((total, [, attrs]) => total + (attrs.d?.length || 0), 0);

  return {
    elementCount,
    pathCount,
    totalPathLength,
    hasMultiplePaths: pathCount > 1,
    elementTypes,
    complexity: elementCount > 3 ? 'high' : elementCount > 1 ? 'medium' : 'low'
  };
}

// Find most/least complex icons
const iconComplexities = Object.entries(outlineNodes).map(([name, paths]) => ({
  name,
  ...analyzeIconComplexity(paths)
}));

const mostComplex = iconComplexities.sort((a, b) => b.elementCount - a.elementCount)[0];
const leastComplex = iconComplexities.sort((a, b) => a.elementCount - b.elementCount)[0];

// Filter by complexity
const simpleIcons = iconComplexities.filter(icon => icon.complexity === 'low');
const complexIcons = iconComplexities.filter(icon => icon.complexity === 'high');

// Element type statistics
const elementTypeStats = iconComplexities.reduce((stats, icon) => {
  icon.elementTypes.forEach(type => {
    stats[type] = (stats[type] || 0) + 1;
  });
  return stats;
}, {});

Common Usage Patterns

Icon Rendering Engine

Build a custom icon rendering system using path data.

import outlineNodes from "@tabler/icons/tabler-nodes-outline.json";
import filledNodes from "@tabler/icons/tabler-nodes-filled.json";

class IconRenderer {
  constructor() {
    this.outlineData = outlineNodes;
    this.filledData = filledNodes;
  }

  render(iconName, style = 'outline', options = {}) {
    const data = style === 'outline' ? this.outlineData : this.filledData;
    const paths = data[iconName];
    
    if (!paths) {
      throw new Error(`Icon "${iconName}" not found in ${style} style`);
    }

    return this.generateSVG(paths, style, options);
  }

  generateSVG(paths, style, options) {
    // Implementation using the generateCustomSVG function from above
    return generateCustomSVG(iconName, style, options);
  }

  getAvailableIcons(style) {
    const data = style === 'outline' ? this.outlineData : this.filledData;
    return Object.keys(data);
  }

  hasIcon(iconName, style) {
    const data = style === 'outline' ? this.outlineData : this.filledData;
    return iconName in data;
  }
}

const renderer = new IconRenderer();
const homeIcon = renderer.render('home', 'outline', { strokeWidth: 1.5 });

Batch Icon Processing

Process multiple icons programmatically for build systems or generators.

import outlineNodes from "@tabler/icons/tabler-nodes-outline.json";

// Generate all icons with custom properties
function generateIconLibrary(style, customOptions) {
  const data = style === 'outline' ? outlineNodes : filledNodes;
  const icons = {};

  Object.keys(data).forEach(iconName => {
    icons[iconName] = generateCustomSVG(iconName, style, customOptions);
  });

  return icons;
}

// Create optimized icon sprites
function createIconSprite(iconNames, style = 'outline') {
  const data = style === 'outline' ? outlineNodes : filledNodes;
  
  const symbols = iconNames.map(iconName => {
    const paths = data[iconName];
    if (!paths) return null;

    const pathElements = paths.map(([tag, attrs]) => {
      const attrString = Object.entries(attrs)
        .map(([key, value]) => `${key}="${value}"`)
        .join(' ');
      return `<${tag} ${attrString}/>`;
    }).join('\n    ');

    return `  <symbol id="icon-${iconName}" viewBox="0 0 24 24">
    ${pathElements}
  </symbol>`;
  }).filter(Boolean);

  return `<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
${symbols.join('\n')}
</svg>`;
}

Install with Tessl CLI

npx tessl i tessl/npm-tabler--icons

docs

index.md

metadata.md

react-components.md

svelte-components.md

svg-data.md

svg-files.md

vue-components.md

tile.json