feat: IconDirective

Author: xidedix

projects/coreui-icons-angular/src/lib/icon/icon.directive.spec.ts

@@ -0,0 +1,58 @@
+import { Component, DebugElement, Renderer2, Type, ViewChild } from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { By, DomSanitizer } from '@angular/platform-browser';
+
+import { IconDirective } from './icon.directive';
+import { IconSetService } from '../icon-set';
+import { cilList } from '@coreui/icons';
+
+@Component({
+  template: `
+    <svg [cIcon]="this.iconSet.icons.cilList" size="lg" class="test" title="Test"></svg>`
+})
+class TestComponent {
+  @ViewChild(IconDirective, {read: IconDirective}) iconRef!: IconDirective;
+
+  constructor(
+    public iconSet: IconSetService
+  ) {
+    this.iconSet.icons = {cilList};
+  }
+}
+
+
+describe('IconDirective', () => {
+  let component: TestComponent;
+  let fixture: ComponentFixture<TestComponent>;
+  let svgEl: DebugElement;
+  let renderer: Renderer2;
+  let sanitizer: DomSanitizer;
+  let iconSetService: IconSetService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [TestComponent, IconDirective],
+      providers: [IconSetService]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(TestComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+    svgEl = fixture.debugElement.query(By.css('svg'));
+    renderer = fixture.componentRef.injector.get(Renderer2 as Type<Renderer2>);
+    sanitizer = fixture.componentRef.injector.get(DomSanitizer);
+    iconSetService = fixture.componentRef.injector.get(IconSetService);
+  });
+
+  it('should create an instance', () => {
+    const directive = new IconDirective(renderer, svgEl, sanitizer, iconSetService);
+    expect(directive).toBeTruthy();
+  });
+  it('icon classes should be applied', () => {
+    console.log(svgEl.nativeElement);
+    expect(svgEl.nativeElement).toBeTruthy();
+    expect(svgEl.nativeElement).toHaveClass('icon');
+    expect(svgEl.nativeElement).toHaveClass('icon-lg');
+    expect(svgEl.nativeElement).toHaveClass('test');
+  });
+});

projects/coreui-icons-angular/src/lib/icon/icon.directive.ts

@@ -0,0 +1,110 @@
+import { Directive, ElementRef, HostBinding, Input, Renderer2 } from '@angular/core';
+import { DomSanitizer } from '@angular/platform-browser';
+import { IconSetService } from '../icon-set';
+
+import { IconSize, IIcon } from './icon.interface';
+
+@Directive({
+  selector: 'svg[cIcon]',
+  exportAs: 'cIcon'
+})
+export class IconDirective implements IIcon {
+
+  @Input('cIcon') content?: string | string[] | any[];
+  @Input() size: IconSize = '';
+  @Input() title?: string;
+  @Input() customClasses?: string | string[] | Set<string> | { [klass: string]: any };
+  @Input() width?: string;
+  @Input() height?: string;
+
+  @Input()
+  set name(name: string) {
+    this._name = name.includes('-') ? this.toCamelCase(name) : name;
+  }
+  get name(): string {
+    return this._name;
+  }
+  private _name!: string;
+
+  @HostBinding('attr.viewBox')
+  @Input()
+  set viewBox(viewBox: string) {
+    this._viewBox = viewBox;
+  }
+  get viewBox(): string {
+    return this._viewBox ?? this.scale;
+  }
+  private _viewBox!: string;
+
+  @HostBinding('attr.xmlns')
+  @Input() xmlns = 'http://www.w3.org/2000/svg';
+
+  @HostBinding('attr.pointer-events')
+  @Input('pointer-events') pointerEvents = 'none';
+
+  @HostBinding('class')
+  get hostClasses() {
+    const classes = {
+      icon: true,
+      [`icon-${this.computedSize}`]: !!this.computedSize
+    };
+    return this.customClasses ?? classes;
+  }
+
+  @HostBinding('innerHtml')
+  get innerHtml() {
+    const code = Array.isArray(this.code) ? this.code[1] || this.code[0] : this.code ?? '';
+    // todo proper sanitize
+    // const sanitized = this.sanitizer.sanitize(SecurityContext.HTML, code);
+    return this.sanitizer.bypassSecurityTrustHtml((this.titleCode + code) ?? '');
+  }
+
+  constructor(
+    private renderer: Renderer2,
+    private elementRef: ElementRef,
+    private sanitizer: DomSanitizer,
+    private iconSet: IconSetService
+  ) { }
+
+  get titleCode(): string {
+    return this.title ? `<title>${this.title}</title>` : '';
+  }
+
+  get code(): string | string[] | undefined {
+    if (this.content) {
+      return this.content;
+    }
+    if (this.iconSet && this.name) {
+      return this.iconSet.getIcon(this.name);
+    }
+    if (this.name && !this.iconSet?.icons[this.name])
+      console.warn(`c-icon component: icon name '${this.name}' does not exist for IconSet service. ` +
+        `To use icon by 'name' prop you need to add it to IconSet service. \n`,
+        this.name
+      );
+    return undefined;
+  }
+
+  get scale(): string {
+    return Array.isArray(this.code) && this.code.length > 1 ? `0 0 ${this.code[0]}` : '0 0 64 64';
+  }
+
+  get computedSize(): Exclude<IconSize, 'custom'> | undefined {
+    const addCustom = !this.size && (this.width || this.height);
+    return this.size === 'custom' || addCustom ? 'custom-size' : this.size;
+  }
+
+  get computedClasses(): any {
+    const classes = {
+      icon: true,
+      [`icon-${this.computedSize}`]: !!this.computedSize
+    };
+    return !!this.customClasses ? this.customClasses : classes;
+  }
+
+  toCamelCase(str: string): any {
+    return str.replace(/([-_][a-z0-9])/ig, ($1: string) => {
+      return $1.toUpperCase().replace('-', '');
+    });
+  }
+}

projects/coreui-icons-angular/src/lib/icon/icon.interface.ts

@@ -0,0 +1,28 @@
+export interface IIcon {
+  content?: string | string[] | any[];
+  customClasses?: string | string[] | Set<string> | { [klass: string]: any };
+  height?: string;
+  name?: string;
+  pointerEvents?: string;
+  size?: IconSize;
+  title?: string;
+  viewBox?: string;
+  width?: string;
+  xmlns?: string;
+}
+
+export type IconSize =
+  'custom'
+  | 'custom-size'
+  | 'sm'
+  | 'lg'
+  | 'xl'
+  | 'xxl'
+  | '3xl'
+  | '4xl'
+  | '5xl'
+  | '6xl'
+  | '7xl'
+  | '8xl'
+  | '9xl'
+  | string;

projects/coreui-icons-angular/src/lib/icon/icon.module.ts

@@ -1,19 +1,23 @@
-import {NgModule} from '@angular/core';
+import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 
-import {IconComponent} from './icon.component';
+import { IconComponent } from './icon.component';
+import { IconDirective } from './icon.directive';
 import { HtmlAttributesDirective } from '../shared/html-attr.directive';
 
 @NgModule({
   declarations: [
     IconComponent,
-    HtmlAttributesDirective
+    HtmlAttributesDirective,
+    IconDirective
   ],
   imports: [
     CommonModule,
   ],
   exports: [
     IconComponent,
+    IconDirective
   ],
 })
-export class IconModule {}
+export class IconModule {
+}

projects/coreui-icons-angular/src/lib/icon/public_api.ts

@@ -1,3 +1,4 @@
+export { IconDirective } from './icon.directive';
 export { IconComponent } from './icon.component';
 export { IconModule } from './icon.module';
 

projects/coreui-icons-angular/src/public-api.ts

@@ -1,6 +1,7 @@
 /*
  * Public API Surface of @coreui/icons-angular
  */
+export { IconDirective } from './lib/icon/icon.directive';
 export { IconComponent } from './lib/icon/icon.component';
 export { IconModule } from './lib/icon/icon.module';
 export { IconSetService, IIconSet } from './lib/icon-set/icon-set.service';