Angular LobHub Icons

A professional AI/LLM model brand SVG logo and icon collection for Angular applications, built on @lobehub/icons.

⚡ About

This project is an Angular wrapper for LobHub Icons, a professional icon library focused on AI and LLM models:

• 🎨 Comprehensive AI/LLM Icon Collection - Professionally designed icons for AI models, tools, and technology brands
• 🌈 Multiple Variants - Each icon comes with color, outline, and text variants
• 🧠 AI-Focused - Specialized icons for AI models, tools, and technology brands
• 📦 SVG Based - Pure SVG icons for crisp quality at any size
• 🔄 Regularly Updated - New icons added regularly to keep up with latest technologies

Visit LobHub Icons for the complete icon showcase and documentation.

📦 Installation

npm install @luoxiao123/angular-lobehub-icons

or

yarn add @luoxiao123/angular-lobehub-icons

or with pnpm

pnpm add @luoxiao123/angular-lobehub-icons

🚀 Usage

The icons are generated from @lobehub/icons-static-svg

As Module

import { Component } from '@angular/core';
import { LobehubIconsModule } from '@luoxiao123/angular-lobehub-icons';
import * as LobehubIcons from '@luoxiao123/angular-lobehub-icons';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [LobehubIconsModule],
  template: `
    <lobehub-icon name="openai"></lobehub-icon>
  `,
})
export class AppComponent {
  constructor() {
    // Initialize module with icons
    LobehubIconsModule.pick(LobehubIcons);
  }
}

As Directive

You can also use the icon as a directive:

<i-lobehub name="openai"></i-lobehub>

With Standalone API (Recommended)

Using the new standalone API:

import { Component } from '@angular/core';
import { provideLobehubIcons, LobehubIconComponent } from '@luoxiao123/angular-lobehub-icons';
import * as LobehubIcons from '@luoxiao123/angular-lobehub-icons';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [LobehubIconComponent],
  providers: [provideLobehubIcons(LobehubIcons)],
  template: `<lobehub-icon name="openai"></lobehub-icon>`,
})
export class AppComponent {}

📖 Documentation

For more examples and detailed documentation, please visit the GitHub repository.

🎯 Features

• ✨ Easy to use - Simple component and directive APIs for quick integration
• 🎨 Customizable - Full support for colors, sizes, and custom styling
• 📦 Tree-shakeable - Only bundle the icons you use
• 🔧 TypeScript support - Fully typed for excellent IDE support
• 🎭 Standalone components - Works seamlessly with Angular standalone API
• 💪 Type-safe - Compile-time icon name checking
• 🚀 Performance optimized - Efficient rendering with OnPush change detection
• 🌍 Comprehensive coverage - Access to thousands of icons from LobHub

🔗 Related Projects

• @lobehub/icons - The original icon library
• @lobehub/icons-static-svg - Static SVG exports
• angular-tabler-icons - Tabler icons for Angular

📄 License

MIT License © 2024 xylplm