@mj-khan/svg-icons

A lightweight CSS/SVG icon library with multiple sizes and easy color customization.

Installation

npm (Recommended)

npm install @mj-khan/svg-icons

Download from GitHub

1. Download the latest release from GitHub Releases
2. Extract the files
3. Include dist/icons.min.css in your project

Quick Start

1. Include the CSS file

For npm installations: Add to your HTML:

<link rel="stylesheet" href="node_modules/@mj-khan/svg-icons/dist/icons.min.css">

Or import in CSS:

@import '@mj-khan/svg-icons/dist/icons.min.css';

For downloaded version:

<link rel="stylesheet" href="path/to/icons.min.css">

2. Add icons to your HTML

<!-- Small (16px) -->
<i class="icon icon-home icon-sm"></i>

<!-- Medium (24px) - default -->
<i class="icon icon-home icon-md"></i>

<!-- Large (32px) -->
<i class="icon icon-home icon-lg"></i>

<!-- Extra Large (48px) -->
<i class="icon icon-home icon-xl"></i>

3. Color icons using CSS

.icon {
  color: #ff0000; /* Changes icon color */
}

/* Or inherit from parent */
.btn {
  color: #3498db;
}
<button class="btn">
  <i class="icon icon-search icon-sm"></i>
  Search
</button>

Angular Integration

Step 1: Install

npm install @mj-khan/svg-icons

Step 2: Add to angular.json

"styles": [
  "src/styles.css",
  "node_modules/@mj-khan/svg-icons/dist/icons.min.css"
]

Step 3: Use in templates

<i class="icon icon-home icon-md"></i>
<i class="icon icon-user icon-sm"></i>
<i class="icon icon-search icon-lg"></i>

Optional: Angular Icon Component

Create icon.component.ts for type-safe usage:

import { Component, Input } from '@angular/core';

@Component({
  selector: 'app-icon',
  template: `<i class="icon" [ngClass]="iconClasses"></i>`,
  styles: [`:host { display: inline-block; }`]
})
export class IconComponent {
  @Input() name!: string;
  @Input() size: 'sm' | 'md' | 'lg' | 'xl' = 'md';

  get iconClasses(): string[] {
    return [`icon-${this.name}`, `icon-${this.size}`];
  }
}

Usage:

<app-icon name="home" size="md"></app-icon>
<app-icon name="search" size="sm"></app-icon>

Available Icons

Core Icons

• home - Home/House icon
• user - User/Person icon
• search - Search/Magnifying glass icon
• settings - Settings/Gear icon
• email - Email/Envelope icon
• menu - Menu/Hamburger icon

Action Icons

• Add - Add/Plus icon
• filter - Filter icon
• Data_filter - Data filter icon
• report - Report icon
• Verify_Bounces - Verify bounces icon

UI Icons

• Column_Visibility - Column visibility icon
• Therapeutic_area - Therapeutic area icon

Icon Sizes

| Class | Size | |-------|------| | icon-sm | 16px | | icon-md | 24px | | icon-lg | 32px | | icon-xl | 48px |

Adding New Icons

1. Add SVG file to the icons/ directory
2. Filename (without extension) becomes the icon class name
3. Run npm run build to regenerate CSS
4. Commit and publish

Building

npm run build    # Build CSS to dist/
npm run publish  # Build and publish to npm

Publishing to npm

1. Update version in package.json
2. Run npm run build
3. Login to npm: npm login
4. Publish: npm publish --access public

Browser Support

• Chrome (all versions)
• Firefox (all versions)
• Safari (all versions)
• Edge (all versions)
• IE11 (with polyfills)

License

ISC