NgVuiIcon Component - Complete Tutorial

Introduction

The NgVuiIcon component is a comprehensive SVG icon system that provides a scalable, customizable solution for displaying icons in Angular applications. It includes a registry system for managing icons and comes with 20+ built-in icons for common use cases.

Key Features: SVG-based icons, Icon registry system, Color variants, Size variants, File type detection, Status icon helpers, TypeScript support

Getting Started

Installation

npm install @ng-vui/icon

Import

import { NgVuiIconComponent } from '@ng-vui/icon';

@Component({
  standalone: true,
  imports: [NgVuiIconComponent],
  template: `
    <ng-vui-icon name="file" size="24px"></ng-vui-icon>
  `
})
export class MyComponent {}

Basic Usage

Basic file icon

<ng-vui-icon name="file"></ng-vui-icon>

Available Icons

The component comes with 20+ built-in icons organized by category:

File Type Icons

file

file-image

file-pdf

file-doc

file-excel

file-zip

Status Icons

check-circle

x-circle

exclamation-circle

clock

UI Icons

upload

folder

plus

x

Examples

Size Variants

12px

16px

20px (default)

24px

32px

<ng-vui-icon name="file" size="12px"></ng-vui-icon>
<ng-vui-icon name="file" size="16px"></ng-vui-icon>
<ng-vui-icon name="file" size="20px"></ng-vui-icon> <!-- default -->
<ng-vui-icon name="file" size="24px"></ng-vui-icon>
<ng-vui-icon name="file" size="32px"></ng-vui-icon>

Color Variants

primary

success

warning

error

muted

<ng-vui-icon name="check-circle" color="primary"></ng-vui-icon>
<ng-vui-icon name="check-circle" color="success"></ng-vui-icon>
<ng-vui-icon name="exclamation-circle" color="warning"></ng-vui-icon>
<ng-vui-icon name="x-circle" color="error"></ng-vui-icon>
<ng-vui-icon name="file" color="muted"></ng-vui-icon>

API Reference

Component Inputs

Property	Type	Default	Description
name	`string`	required	Name of the icon to display
size	`string`	'20px'	Size of the icon (CSS size value)
color	`'primary' \| 'secondary' \| 'success' \| 'warning' \| 'error' \| 'info' \| 'muted'`	undefined	Predefined color variant
className	`string`	undefined	Additional CSS classes

Utility Functions

getFileTypeIcon(fileName: string, mimeType?: string): string

Returns appropriate icon name based on file extension or MIME type.

const iconName = getFileTypeIcon('document.pdf'); // returns 'file-pdf'

getStatusIcon(status: string): string

Returns appropriate icon name for status indicators.

const iconName = getStatusIcon('success'); // returns 'check-circle'

registerIcon(name: string, svg: string): void

Register a custom icon in the icon registry.

registerIcon('custom-icon', '<svg>...</svg>');

Advanced Usage

Custom Icons

You can register custom icons using the icon registry:

import { registerIcon } from '@ng-vui/icon';

// Register a custom icon
registerIcon('my-custom-icon', `
  <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path d="M12 2L2 7v10l10 5 10-5V7l-10-5z" stroke="currentColor" stroke-width="2"/>
  </svg>
`);

// Use in template
// <ng-vui-icon name="my-custom-icon"></ng-vui-icon>

Dynamic File Type Icons

import { getFileTypeIcon } from '@ng-vui/icon';

@Component({
  template: `
    <ng-vui-icon
      [name]="getFileIcon(file.name, file.type)"
      size="24px">
    </ng-vui-icon>
  `
})
export class FileDisplayComponent {
  getFileIcon = getFileTypeIcon;

  file = { name: 'document.pdf', type: 'application/pdf' };
}

Status Indicators

import { getStatusIcon } from '@ng-vui/icon';

@Component({
  template: `
    <ng-vui-icon
      [name]="getStatusIcon(uploadStatus)"
      [color]="getStatusColor(uploadStatus)"
      size="20px">
    </ng-vui-icon>
  `
})
export class UploadStatusComponent {
  uploadStatus = 'uploading';

  getStatusIcon = getStatusIcon;

  getStatusColor(status: string) {
    switch(status) {
      case 'success': return 'success';
      case 'error': return 'error';
      case 'pending': return 'warning';
      default: return 'secondary';
    }
  }
}

Styling

The component uses CSS custom properties and can be styled with standard CSS:

/* Custom icon styling */
.ng-vui-icon {
  color: #ff6b6b;
  transition: color 0.2s ease;
}

.ng-vui-icon:hover {
  color: #ff5252;
}

/* Custom size */
.large-icon {
  width: 48px !important;
  height: 48px !important;
}