8000 fix(icon): renfer svg before c-icon component · coreui/coreui-icons-angular@d6cbabf · GitHub
[go: up one dir, main page]
Skip to content
This repository was archived by the owner on Jul 13, 2022. It is now read-only.

Commit d6cbabf

Browse files
xidedixxidedix
committed
fix(icon): renfer svg before c-icon component
1 parent ad45c31 commit d6cbabf

File tree

5 files changed

+100
-44
lines changed

5 files changed

+100
-44
lines changed

‎projects/coreui-icons-angular/src/lib/icon/icon.component.scss

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
1-
:host use, :host svg { }
1+
:host use, :host svg {}
22

33
// Icon variables
4-
$icon-size-base: 1rem !default;
5-
$icon-size-sm: $icon-size-base * .875 !default;
6-
$icon-size-lg: $icon-size-base * 1.25 !default;
7-
$icon-size-xl: $icon-size-base * 1.5 !default;
8-
$icon-size-xxl: $icon-size-base * 2 !default;
4+
$icon-size-base: 1rem !default;
5+
$icon-size-sm: $icon-size-base * .875 !default;
6+
$icon-size-lg: $icon-size-base * 1.25 !default;
7+
$icon-size-xl: $icon-size-base * 1.5 !default;
8+
$icon-size-xxl: $icon-size-base * 2 !default;
99

1010
// Icon sizes
1111
@mixin icon-size($icon-size) {

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

Lines changed: 45 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,65 @@
11
import { ComponentFixture, TestBed } from '@angular/core/testing';
2-
import { HtmlAttributesDirective } from '../shared/html-attr.directive';
2+
import { Component, DebugElement, ViewChild } from '@angular/core';
33

4+
import { cilList } from '@coreui/icons';
5+
import { HtmlAttributesDirective } from '../shared/html-attr.directive';
46
import { IconComponent } from './icon.component';
7+
import { IconSetService } from '../icon-set';
8+
import { By } from '@angular/platform-browser';
9+
10+
@Component({
11+
template: `
12+
<div>
13+
<c-icon #icon name="cilList" size="lg" class="test"></c-icon>
14+
</div>`
15+
})
16+
class TestComponent {
17+
@ViewChild('icon', {read: IconComponent}) iconRef!: IconComponent;
18+
19+
constructor(
20+
public iconSet: IconSetService
21+
) {
22+
this.iconSet.icons = {cilList};
23+
}
24+
}
25+
526

627
describe('IconComponent', () => {
7-
let component: IconComponent;
8-
let fixture: ComponentFixture<IconComponent>;
28+
let inputEl: DebugElement;
29+
let component: TestComponent;
30+
let fixture: ComponentFixture<TestComponent>;
931

1032
beforeEach(async () => {
1133
TestBed.configureTestingModule({
12-
declarations: [IconComponent, HtmlAttributesDirective]
34+
declarations: [TestComponent, IconComponent, HtmlAttributesDirective],
35+
providers: [IconSetService]
1336
}).compileComponents();
37+
1438
});
1539

1640
beforeEach(() => {
17-
fixture = TestBed.createComponent(IconComponent);
41+
fixture = TestBed.createComponent(TestComponent);
1842
component = fixture.componentInstance;
1943
fixture.detectChanges();
44+
inputEl = fixture.debugElement.query(By.css('svg'));
2045
});
2146

2247
it('should create', () => {
2348
expect(component).toBeTruthy();
2449
});
50+
51+
it('service should exist', () => {
52+
expect(component.iconSet).toBeTruthy();
53+
});
54+
it('icon component should render', () => {
55+
expect(component.iconRef).toBeTruthy();
56+
expect(component.iconRef.name).toBe('cilList');
57+
expect(component.iconRef.svgElementRef).toBeTruthy();
58+
});
59+
it('icon classes should be applied', () => {
60+
expect(inputEl.nativeElement).toBeTruthy();
61+
expect(inputEl.nativeElement).toHaveClass('icon');
62+
expect(inputEl.nativeElement).toHaveClass('icon-lg');
63+
expect(inputEl.nativeElement).toHaveClass('test');
64+
});
2565
});

‎projects/coreui-icons-angular/src/lib/icon/icon.component.svg

Lines changed: 15 additions & 11 deletions
Loading

‎projects/coreui-icons-angular/src/lib/icon/icon.component.ts

Lines changed: 33 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Component, Input } from '@angular/core';
1+
import { AfterViewInit, Component, ElementRef, Input, Renderer2, ViewChild } from '@angular/core';
22
import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
33
import { IconSetService } from '../icon-set/icon-set.service';
44

@@ -7,9 +7,9 @@ import { IconSetService } from '../icon-set/icon-set.service';
77
templateUrl: './icon.component.svg',
88
styleUrls: ['./icon.component.scss']
99
})
10-
export class IconComponent {
10+
export class IconComponent implements AfterViewInit {
1111

12-
@Input() attributes: any = { role: 'img' };
12+
@Input() attributes: any = {role: 'img'};
1313
@Input() content?: string | string[];
1414
@Input() size: 'custom' | 'custom-size' | 'sm' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl' | '6xl' | '7xl' | '8xl' | '9xl' | '' = '';
1515
@Input() src?: string;
@@ -19,34 +19,46 @@ export class IconComponent {
1919
@Input() width?: string;
2020
@Input() height?: string;
2121

22-
constructor(
23-
private sanitizer: DomSanitizer,
24-
private iconSet: IconSetService
25-
) { }
26-
27-
// tslint:disable-next-line:variable-name
28-
private _name!: string;
22+
@Input()
23+
set name(name: string) {
24+
const nameIsKebabCase = name.includes('-');
25+
this._name = nameIsKebabCase ? this.toCamelCase(name) : name;
26+
}
2927

3028
get name(): string {
31-
const nameIsKebabCase = this._name?.includes('-');
32-
return nameIsKebabCase ? this.toCamelCase(this._name) : this._name;
29+
return this._name;
3330
}
3431

32+
private _name!: string;
33+
3534
@Input()
36-
set name(name: string) {
37-
this._name = name;
35+
set viewBox(viewBox: string) {
36+
this._viewBox = viewBox;
37+
}
38+
get viewBox(): string {
39+
return this._viewBox ?? `0 0 ${this.scale}`;
3840
}
39-
40-
// tslint:disable-next-line:variable-name
4141
private _viewBox!: string;
4242

43-
get viewBox(): string {
44-
return this._viewBox || `0 0 ${this.scale}`;
43+
@ViewChild('svgElement', {read: ElementRef}) svgElementRef!: ElementRef;
44+
45+
constructor(
46+
private renderer: Renderer2,
47+
private elementRef: ElementRef,
48+
private sanitizer: DomSanitizer,
49+
private iconSet: IconSetService
50+
) {
51+
this.renderer.setStyle(this.elementRef.nativeElement, 'display', 'none');
4552
}
4653

47-
@Input()
48-
set viewBox(viewBox: string) {
49-
this._viewBox = viewBox;
54+
ngAfterViewInit(): void {
55+
this.elementRef.nativeElement.classList.forEach((item: string) => {
56+
this.renderer.addClass(this.svgElementRef.nativeElement, item);
57+
});
58+
const parentElement = this.renderer.parentNode(this.elementRef.nativeElement);
59+
const svgElement = this.svgElementRef.nativeElement;
60+
this.renderer.insertBefore(parentElement, svgElement, this.elementRef.nativeElement);
61+
this.renderer.removeChild(parentElement, this.elementRef.nativeElement);
5062
}
5163

5264
get titleCode(): string {

‎projects/coreui-icons-angular/src/lib/shared/html-attr.directive.spec.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,7 @@ describe('HtmlAttributesDirective', () => {
4747

4848
it('should render an id attr', () => {
4949
fixture.detectChanges();
50-
console.log(inputEl.nativeElement.attributes);
50+
// console.log(inputEl.nativeElement.attributes);
5151
expect(inputEl.nativeElement.getAttribute('id')).toBe('id-1');
5252
});
5353
});

0 commit comments

Comments
 (0)
0