Spartans get ready! v1 is coming!
We are very close to our first stable release. Expect more announcements in the coming weeks. v1 was made possible by our partner Zerops.
Getting Started
Stack
Components
- Accordion
- Alert
- Alert Dialog
- Aspect Ratio
- Autocomplete
- Avatar
- Badge
- Breadcrumb
- Button
- Button Group
- Calendar
- Card
- Carousel
- Checkbox
- Collapsible
- Combobox
- Command
- Context Menu
- Data Table
- Date Picker
- Dialog
- Dropdown Menu
- Empty
- Form Field
- Hover Card
- Icon
- Input Group
- Input OTP
- Input
- Item
- Kbd
- Label
- Menubar
- Pagination
- Popover
- Progress
- Radio Group
- Scroll Area
- Select
- Separator
- Sheet
- Sidebar
- Skeleton
- Slider
- Sonner (Toast)
- Spinner
- Switch
- Table
- Tabs
- Textarea
- Toggle
- Toggle Group
- Tooltip
Icon
Visual cues for enhancing user interaction.
import { Component } from '@angular/core';
import { NgIcon, provideIcons } from '@ng-icons/core';
import { lucideChevronRight } from '@ng-icons/lucide';
import { HlmIcon } from '@spartan-ng/helm/icon';
@Component({
selector: 'spartan-icon-preview',
imports: [NgIcon, HlmIcon],
providers: [provideIcons({ lucideChevronRight })],
template: `
<div>
<ng-icon hlm size="xl" name="lucideChevronRight" />
</div>
`,
})
export class IconPreview {}About
Icon is built on top of ng-icons by @ashley-hunter .
Installation
npx nx g @spartan-ng/cli:ui icon
ng g @spartan-ng/cli:ui icon
This will also install @ng-icons/core and @ng-icons/lucide . ng-icons supports multiple icon sets , each with its own package.
By default, spartan/ui components use the Lucide ( @ng-icons/lucide ) icon set. You can customize this behavior in two ways:
- Replace
@ng-icons/lucideentirely with another icon set - icon names vary and must be updated manually - Use multiple icon sets side-by-side by installing additional packages
Usage
import { HlmIcon } from '@spartan-ng/helm/icon';
import { NgIcon, provideIcons } from '@ng-icons/core';<ng-icon hlm size="sm" name="lucideChevronRight" />Examples
Size
import { Component } from '@angular/core';
import { NgIcon, provideIcons } from '@ng-icons/core';
import { lucideChevronRight } from '@ng-icons/lucide';
import { HlmIcon } from '@spartan-ng/helm/icon';
@Component({
selector: 'spartan-icon-size',
imports: [NgIcon, HlmIcon],
providers: [provideIcons({ lucideChevronRight })],
template: `
<div class="flex items-center gap-6">
<ng-icon hlm size="sm" name="lucideChevronRight" />
<ng-icon hlm name="lucideChevronRight" />
<ng-icon hlm size="lg" name="lucideChevronRight" />
<ng-icon hlm size="xl" name="lucideChevronRight" />
<ng-icon hlm size="64px" name="lucideChevronRight" />
</div>
`,
})
export class IconSizePreview {}Responsive Size
Use font-sizes (e.g. text-lg ) utilities to adjust icon size responsively. The HlmIcon directive is not required.
import { Component } from '@angular/core';
import { NgIcon, provideIcons } from '@ng-icons/core';
import { lucideChevronRight } from '@ng-icons/lucide';
@Component({
selector: 'spartan-icon-responsive',
imports: [NgIcon],
providers: [provideIcons({ lucideChevronRight })],
template: `
<ng-icon class="text-xl sm:text-2xl md:text-4xl lg:text-6xl" name="lucideChevronRight" />
`,
})
export class IconResponsivePreview {}Multiple Icon Sets
import { Component } from '@angular/core';
import { NgIcon, provideIcons } from '@ng-icons/core';
import { lucideCircleArrowUp } from '@ng-icons/lucide';
import { remixAngularjsLine } from '@ng-icons/remixicon';
import { HlmIcon } from '@spartan-ng/helm/icon';
@Component({
selector: 'spartan-icon-multiple-sets',
imports: [NgIcon, HlmIcon],
providers: [provideIcons({ lucideCircleArrowUp, remixAngularjsLine })],
template: `
<div class="flex items-center gap-6">
<div class="flex flex-col items-center gap-1">
<ng-icon hlm size="xl" name="lucideCircleArrowUp" />
<span class="text-muted-foreground text-sm">lucideCircleArrowUp</span>
</div>
<div class="flex flex-col items-center gap-1">
<ng-icon hlm size="xl" name="remixAngularjsLine" />
<span class="text-muted-foreground text-sm">remixAngularjsLine</span>
</div>
</div>
`,
})
export class IconMultipleSetsPreview {}Lucide Icons
Helm API
HlmIcon
Selector: ng-icon[hlmIcon], ng-icon[hlm]
Inputs
| Prop | Type | Default | Description |
|---|---|---|---|
| size | IconSize | this._config.size | - |