Icon

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 {}

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 {}

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 {}

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 {}