0
# Programmatic SVG Data
1

2
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.
3

4
## Capabilities
5

6
### Outline SVG Path Data
7

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

10
```javascript { .api }
11
/**
12
 * Outline icons SVG path data
13
 * Contains path elements for all 4,964 outline icons
14
 */
15
import outlineNodes from "@tabler/icons/tabler-nodes-outline.json";
16

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

20
interface OutlineNodesData {
21
  [iconName: string]: IconPathData;
22
}
23
```
24

25
**Usage Examples:**
26

27
```javascript
28
import outlineNodes from "@tabler/icons/tabler-nodes-outline.json";
29

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

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

43
  const {
44
    width = 24,
45
    height = 24,
46
    strokeWidth = 2,
47
    stroke = 'currentColor',
48
    fill = 'none'
49
  } = options;
50

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

58
  return `<svg xmlns="http://www.w3.org/2000/svg" 
59
    width="${width}" height="${height}" 
60
    viewBox="0 0 24 24" 
61
    fill="${fill}" 
62
    stroke="${stroke}" 
63
    stroke-width="${strokeWidth}" 
64
    stroke-linecap="round" 
65
    stroke-linejoin="round">
66
  ${pathElements}
67
</svg>`;
68
}
69
```
70

71
### Filled SVG Path Data
72

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

75
```javascript { .api }
76
/**
77
 * Filled icons SVG path data
78
 * Contains path elements for all 981 filled icons
79
 */
80
import filledNodes from "@tabler/icons/tabler-nodes-filled.json";
81

82
interface FilledNodesData {
83
  [iconName: string]: IconPathData;
84
}
85
```
86

87
**Usage Examples:**
88

89
```javascript
90
import filledNodes from "@tabler/icons/tabler-nodes-filled.json";
91

92
// Access filled icon path data
93
const heartPaths = filledNodes.heart;
94
console.log(heartPaths);
95
// [
96
//   ["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"}]
97
// ]
98

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

104
  const {
105
    width = 24,
106
    height = 24,
107
    fill = 'currentColor'
108
  } = options;
109

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

117
  return `<svg xmlns="http://www.w3.org/2000/svg" 
118
    width="${width}" height="${height}" 
119
    viewBox="0 0 24 24" 
120
    fill="${fill}">
121
  ${pathElements}
122
</svg>`;
123
}
124
```
125

126
### Custom SVG Generation
127

128
Create custom SVG elements with modified properties and styling.
129

130
```javascript { .api }
131
/**
132
 * Generate custom SVG with modified properties
133
 * @param iconName - Name of the icon
134
 * @param style - Icon style ('outline' or 'filled')
135
 * @param options - Customization options
136
 * @returns Generated SVG string or null if icon not found
137
 */
138
function generateCustomSVG(
139
  iconName: string, 
140
  style: 'outline' | 'filled', 
141
  options: SVGOptions
142
): string | null;
143

144
interface SVGOptions {
145
  width?: number;
146
  height?: number;
147
  strokeWidth?: number;
148
  stroke?: string;
149
  fill?: string;
150
  className?: string;
151
  id?: string;
152
  viewBox?: string;
153
}
154
```
155

156
**Usage Examples:**
157

158
```javascript
159
import outlineNodes from "@tabler/icons/tabler-nodes-outline.json";
160
import filledNodes from "@tabler/icons/tabler-nodes-filled.json";
161

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

172
  const {
173
    width = 24,
174
    height = 24,
175
    strokeWidth = 2,
176
    stroke = 'currentColor',
177
    fill = style === 'outline' ? 'none' : 'currentColor',
178
    className = '',
179
    id = '',
180
    viewBox = '0 0 24 24'
181
  } = options;
182

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

190
  const svgAttributes = [
191
    'xmlns="http://www.w3.org/2000/svg"',
192
    `width="${width}"`,
193
    `height="${height}"`,
194
    `viewBox="${viewBox}"`,
195
    style === 'outline' ? `fill="${fill}"` : null,
196
    style === 'outline' ? `stroke="${stroke}"` : null,
197
    style === 'outline' ? `stroke-width="${strokeWidth}"` : null,
198
    style === 'outline' ? 'stroke-linecap="round"' : null,
199
    style === 'outline' ? 'stroke-linejoin="round"' : null,
200
    style === 'filled' ? `fill="${fill}"` : null,
201
    className ? `class="${className}"` : null,
202
    id ? `id="${id}"` : null
203
  ].filter(Boolean).join(' ');
204

205
  return `<svg ${svgAttributes}>
206
  ${pathElements}
207
</svg>`;
208
}
209

210
// Usage examples
211
const customHome = generateCustomSVG('home', 'outline', {
212
  width: 32,
213
  height: 32,
214
  strokeWidth: 1.5,
215
  stroke: '#3b82f6',
216
  className: 'icon-home'
217
});
218

219
const customHeart = generateCustomSVG('heart', 'filled', {
220
  width: 20,
221
  height: 20,
222
  fill: '#ef4444',
223
  id: 'heart-icon'
224
});
225
```
226

227
### Framework Integration Helpers
228

229
Utility functions for integrating with popular frontend frameworks.
230

231
```javascript { .api }
232
/**
233
 * React component generator
234
 * @param iconName - Name of the icon
235
 * @param style - Icon style
236
 * @param props - React props
237
 * @returns React component string or JSX element
238
 */
239
function createReactIcon(iconName: string, style: 'outline' | 'filled', props?: object): string;
240

241
/**
242
 * Vue component generator
243
 * @param iconName - Name of the icon
244
 * @param style - Icon style
245
 * @param props - Vue props
246
 * @returns Vue component template
247
 */
248
function createVueIcon(iconName: string, style: 'outline' | 'filled', props?: object): string;
249

250
/**
251
 * Web Components generator
252
 * @param iconName - Name of the icon
253
 * @param style - Icon style
254
 * @param attributes - HTML attributes
255
 * @returns Custom element definition
256
 */
257
function createWebComponent(iconName: string, style: 'outline' | 'filled', attributes?: object): string;
258
```
259

260
**Usage Examples:**
261

262
```javascript
263
import outlineNodes from "@tabler/icons/tabler-nodes-outline.json";
264

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

272
  const {
273
    size = 24,
274
    color = 'currentColor',
275
    strokeWidth = 2,
276
    className = '',
277
    ...otherProps
278
  } = props;
279

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

287
  return `
288
import React from 'react';
289

290
export const ${iconName.charAt(0).toUpperCase() + iconName.slice(1)}Icon = (props) => (
291
  <svg
292
    xmlns="http://www.w3.org/2000/svg"
293
    width={props.size || ${size}}
294
    height={props.size || ${size}}
295
    viewBox="0 0 24 24"
296
    fill="${style === 'filled' ? color : 'none'}"
297
    stroke="${style === 'outline' ? color : 'none'}"
298
    strokeWidth={props.strokeWidth || ${strokeWidth}}
299
    strokeLinecap="round"
300
    strokeLinejoin="round"
301
    className={props.className || "${className}"}
302
    {...props}
303
  >
304
    ${pathElements}
305
  </svg>
306
);`;
307
}
308

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

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

323
  return `
324
<template>
325
  <svg
326
    xmlns="http://www.w3.org/2000/svg"
327
    :width="size"
328
    :height="size"
329
    viewBox="0 0 24 24"
330
    :fill="${style === 'filled' ? 'color' : 'none'}"
331
    :stroke="${style === 'outline' ? 'color' : 'none'}"
332
    :stroke-width="strokeWidth"
333
    stroke-linecap="round"
334
    stroke-linejoin="round"
335
    :class="className"
336
  >
337
${pathElements}
338
  </svg>
339
</template>
340

341
<script>
342
export default {
343
  name: '${iconName.charAt(0).toUpperCase() + iconName.slice(1)}Icon',
344
  props: {
345
    size: { type: [Number, String], default: 24 },
346
    color: { type: String, default: 'currentColor' },
347
    strokeWidth: { type: [Number, String], default: 2 },
348
    className: { type: String, default: '' }
349
  }
350
};
351
</script>`;
352
}
353
```
354

355
### Path Data Analysis
356

357
Analyze and extract information from SVG path data.
358

359
```javascript { .api }
360
/**
361
 * Analyze icon complexity based on path data
362
 * @param pathData - Array of SVG path elements
363
 * @returns Analysis object with complexity metrics
364
 */
365
function analyzeIconComplexity(pathData: IconPathData): IconComplexity;
366

367
interface IconComplexity {
368
  elementCount: number;
369
  pathCount: number;
370
  totalPathLength: number;
371
  hasMultiplePaths: boolean;
372
  elementTypes: string[];
373
  boundingBox?: BoundingBox;
374
}
375

376
interface BoundingBox {
377
  minX: number;
378
  minY: number;
379
  maxX: number;
380
  maxY: number;
381
  width: number;
382
  height: number;
383
}
384
```
385

386
**Usage Examples:**
387

388
```javascript
389
import outlineNodes from "@tabler/icons/tabler-nodes-outline.json";
390

391
// Analyze icon complexity
392
function analyzeIconComplexity(pathData) {
393
  const elementCount = pathData.length;
394
  const pathCount = pathData.filter(([tag]) => tag === 'path').length;
395
  const elementTypes = [...new Set(pathData.map(([tag]) => tag))];
396
  
397
  const totalPathLength = pathData
398
    .filter(([tag]) => tag === 'path')
399
    .reduce((total, [, attrs]) => total + (attrs.d?.length || 0), 0);
400

401
  return {
402
    elementCount,
403
    pathCount,
404
    totalPathLength,
405
    hasMultiplePaths: pathCount > 1,
406
    elementTypes,
407
    complexity: elementCount > 3 ? 'high' : elementCount > 1 ? 'medium' : 'low'
408
  };
409
}
410

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

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

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

424
// Element type statistics
425
const elementTypeStats = iconComplexities.reduce((stats, icon) => {
426
  icon.elementTypes.forEach(type => {
427
    stats[type] = (stats[type] || 0) + 1;
428
  });
429
  return stats;
430
}, {});
431
```
432

433
## Common Usage Patterns
434

435
### Icon Rendering Engine
436

437
Build a custom icon rendering system using path data.
438

439
```javascript
440
import outlineNodes from "@tabler/icons/tabler-nodes-outline.json";
441
import filledNodes from "@tabler/icons/tabler-nodes-filled.json";
442

443
class IconRenderer {
444
  constructor() {
445
    this.outlineData = outlineNodes;
446
    this.filledData = filledNodes;
447
  }
448

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

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

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

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

470
  hasIcon(iconName, style) {
471
    const data = style === 'outline' ? this.outlineData : this.filledData;
472
    return iconName in data;
473
  }
474
}
475

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

480
### Batch Icon Processing
481

482
Process multiple icons programmatically for build systems or generators.
483

484
```javascript
485
import outlineNodes from "@tabler/icons/tabler-nodes-outline.json";
486

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

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

496
  return icons;
497
}
498

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

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

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

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