npm package: @rchernando/tech-icons
Description: 430+ technology & brand SVG icons for Angular — lightweight, tree-shakeable, with light/dark theme support
Latest version: 2.0.0

# @rchernando/tech-icons

**430+ technology & brand SVG icons for Angular** with real tree-shaking support, light/dark theme variants, and zero runtime dependencies beyond `tslib`.

All icons are embedded as inline SVGs (no external requests at runtime). The component renders them at any size with crisp vector quality.

## Key features

- **Tree-shakeable**: Import only the icons you use. 5 icons = ~58 KB gzipped. All 430+ icons = ~383 KB gzipped.
- **Zero vulnerabilities**: Only runtime dependency is `tslib ^2.3.0`. No transitive dependencies.
- **Light/dark variants**: Many icons include both theme variants with automatic fallback.
- **Angular 16–19**: Works with standalone components and NgModule-based apps.

## Installation

```bash
npm install @rchernando/tech-icons
```

## Quick start

### 1. Register the icons you need

```typescript
// app.config.ts (standalone apps)
import { ApplicationConfig } from '@angular/core';
import { provideIcons, angularIcon, reactIcon, typescriptIcon } from '@rchernando/tech-icons';

export const appConfig: ApplicationConfig = {
  providers: [
    provideIcons(angularIcon, reactIcon, typescriptIcon)
  ]
};
```

### 2. Use the component

```typescript
import { Component } from '@angular/core';
import { TechIconsComponent } from '@rchernando/tech-icons';

@Component({
  selector: 'app-example',
  standalone: true,
  imports: [TechIconsComponent],
  template: `
    <tech-icon name="angular" size="lg"></tech-icon>
    <tech-icon name="react" size="md"></tech-icon>
    <tech-icon name="typescript" size="sm"></tech-icon>
  `,
})
export class ExampleComponent {}
```

## Bundle impact

| What you import | Bundle size (gzipped) |
| --- | --- |
| 5 icons | ~58 KB |
| 50 icons | ~80 KB |
| All 430+ icons (`provideAllIcons()`) | ~383 KB |

Only the icons you register via `provideIcons()` are included in your production bundle. The rest are removed by tree-shaking.

### Import all icons (not recommended for production)

If you don't care about bundle size:

```typescript
import { provideAllIcons } from '@rchernando/tech-icons';

export const appConfig: ApplicationConfig = {
  providers: [provideAllIcons()]
};
```

## NgModule-based apps

```typescript
import { NgModule } from '@angular/core';
import { TechIconsModule, provideAllIcons } from '@rchernando/tech-icons';

@NgModule({
  imports: [TechIconsModule],
  providers: [provideAllIcons()], // or provideIcons(angularIcon, ...)
})
export class AppModule {}
```

## Compatibility

| Angular | Supported |
| ------- | --------- |
| 19.x | Yes |
| 18.x | Yes |
| 17.x | Yes |
| 16.x | Yes |

## API Reference

### `provideIcons(...icons: TechIcon[])`

Registers specific icons for tree-shaking. Call in your app's `providers` array.

### `provideAllIcons()`

Registers all 430+ icons. Adds ~1 MB to your bundle before compression.

### `<tech-icon>` component

| Input | Type | Default | Description |
| --- | --- | --- | --- |
| `name` | `string` (use `IconType` for type safety) | *required* | Icon key (e.g. `'angular'`, `'react'`) |
| `type` | `'default' \| 'light' \| 'dark'` | `'default'` | Theme variant. Falls back to available variant. |
| `size` | `'sm' \| 'md' \| 'lg' \| 'custom'` | `'lg'` | Predefined size or `'custom'` for manual dimensions. |
| `customWidth` | `string` | `'auto'` | CSS width when `size="custom"` (e.g. `'48px'`). |
| `customHeight` | `string` | `'auto'` | CSS height when `size="custom"` (e.g. `'48px'`). |

#### Predefined sizes

| Size | Dimensions |
| ---- | ---------- |
| `sm` | 16 x 16 px |
| `md` | 24 x 24 px |
| `lg` | 32 x 32 px |

### `TechIconsService`

Injectable service for programmatic access to the icon registry.

```typescript
import { TechIconsService } from '@rchernando/tech-icons';

@Component({ /* ... */ })
export class MyComponent {
  constructor(private icons: TechIconsService) {
    const icon = this.icons.getIcon('angular');
    const all = this.icons.getAllIcons();
    const exists = this.icons.hasIcon('react');
  }
}
```

| Method | Returns | Description |
| --- | --- | --- |
| `getIcon(name: string)` | `TechIcon \| undefined` | Look up a single icon by key. |
| `getAllIcons()` | `TechIcon[]` | Get all registered icons. |
| `hasIcon(name: string)` | `boolean` | Check if an icon key exists. |
| `registerIcons(...icons)` | `void` | Manually register icons at runtime. |

### `IconType`

Union type of all available icon keys. Provides IDE autocompletion and compile-time safety.

```typescript
import { IconType } from '@rchernando/tech-icons';

const icon: IconType = 'angular'; // OK
const bad: IconType = 'nonexistent'; // compile error
```

### `TechIcon` interface

```typescript
interface TechIcon {
  id: number;
  title: string;
  key: string;
  default?: string; // SVG markup (single-variant icons)
  light?: string;   // SVG markup (light theme)
  dark?: string;    // SVG markup (dark theme)
}
```

## Usage examples

### Theme variants

```html
<tech-icon name="github" type="light"></tech-icon>
<tech-icon name="github" type="dark"></tech-icon>
<tech-icon name="github"></tech-icon> <!-- auto-selects default, then light -->
```

### Custom sizing

```html
<tech-icon name="angular" size="custom" customWidth="64px" customHeight="64px"></tech-icon>
```

### Dynamic icons

```typescript
@Component({
  standalone: true,
  imports: [TechIconsComponent],
  template: `<tech-icon [name]="selectedIcon" [size]="iconSize"></tech-icon>`,
})
export class DynamicExample {
  selectedIcon = 'angular';
  iconSize: 'sm' | 'md' | 'lg' = 'md';
}
```

## Icon naming convention

Import names follow the pattern `{camelCaseKey}Icon`:

| Icon key | Import name |
| --- | --- |
| `angular` | `angularIcon` |
| `visual-studio-code` | `visualStudioCodeIcon` |
| `tailwind-css` | `tailwindCssIcon` |
| `next.js` | `nextJsIcon` |
| `discord.js` | `discordJsIcon` |
| `c` | `cIcon` |
| `c++` | `cCIcon` |
| `c#` | `cCSharpIcon` |

Use your IDE's autocomplete on `import { ... } from '@rchernando/tech-icons'` to discover all available icons.

## Available icons

The library includes **430+** icons covering:

- **Frameworks & libraries** -- Angular, React, Vue, Svelte, Astro, Next.js, Nuxt, etc.
- **Languages** -- TypeScript, JavaScript, Python, Rust, Go, Lua, etc.
- **Cloud & DevOps** -- AWS, Google Cloud, Azure, Docker, Kubernetes, etc.
- **Databases** -- PostgreSQL, MongoDB, Redis, Supabase, etc.
- **Design tools** -- Figma, Blender, Adobe suite, etc.
- **AI & ML** -- OpenAI, Claude AI, Groq, Cohere, Ollama, etc.
- **Platforms & services** -- GitHub, GitLab, Vercel, Netlify, Cloudflare, etc.

Use `TechIconsService.getAllIcons()` to get the full list programmatically.

## Security

This package has **zero known vulnerabilities**:

- **Runtime dependency**: `tslib ^2.3.0` only (no transitive dependencies)
- **Peer dependencies**: `@angular/core >=16.0.0`, `@angular/common >=16.0.0`
- **`sideEffects: false`** for safe tree-shaking
- Development dependencies (`webpack`, `karma`, etc.) are NOT included in the published package

## License

MIT