8000 feat(icon): add thyIconType for thyIcon component #239663 · atinc/ngx-tethys@62bcfff · GitHub
[go: up one dir, main page]
More Web Proxy on the site http://driver.im/
Skip to content

Commit 62bcfff

Browse files
why520crazywhy520crazy
committed
feat(icon): add thyIconType for thyIcon component #239663
1 parent 243d6f9 commit 62bcfff

File tree

6 files changed

+237
-65
lines changed

6 files changed

+237
-65
lines changed

‎demo/src/app/app.component.html

Lines changed: 0 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -34,15 +34,5 @@
3434
</thy-sidebar>
3535
<thy-content class="bg-white">
3636
<router-outlet></router-outlet>
37-
<!-- <div class="main-content">
38-
<router-outlet></router-outlet>
39-
<div class="content-header">
40-
按钮
41-
<span class="mate">按钮</span>
42-
</div>
43-
<div class="content-main">
44-
<router-outlet></router-outlet>
45-
</div>
46-
</div> -->
4737
</thy-content>
4838
</thy-layout>

‎demo/src/app/components/+icon/icon-section.component.html

Lines changed: 18 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -50,14 +50,20 @@ <h2>基本使用</h2>
5050
<thy-icon thyIconName="play-circle" [ngClass]="fontSizeClass"></thy-icon>
5151
<thy-icon thyIconName="smile" [ngClass]="fontSizeClass"></thy-icon>
5252
<thy-icon thyIconName="check-circle" [ngClass]="fontSizeClass"></thy-icon>
53-
<thy-icon thyIconName="pause-circle-fill" [ngClass]="fontSizeClass"></thy-icon>
54-
<thy-icon thyIconName="more-circle-fill" [ngClass]="fontSizeClass"></thy-icon>
55-
<thy-icon thyIconName="clock-circle-moment-fill" [ngClass]="fontSizeClass"></thy-icon>
56-
<thy-icon thyIconName="user-check-fill" [ngClass]="fontSizeClass"></thy-icon>
57-
<thy-icon thyIconName="user-group-fill" [ngClass]="fontSizeClass"></thy-icon>
58-
<thy-icon thyIconName="waring-fill" [ngClass]="fontSizeClass"></thy-icon>
59-
<thy-icon thyIconName="waring-fill" [ngClass]="fontSizeClass"></thy-icon>
60-
<thy-icon thyIconName="check-fill" thyTwotoneColor="" [ngClass]="fontSizeClass"></thy-icon>
53+
<thy-icon thyIconName="pause-circle" thyIconType="fill" [ngClass]="fontSizeClass"></thy-icon>
54+
<thy-icon thyIconName="more-circle" thyIconType="fill" [ngClass]="fontSizeClass"></thy-icon>
55+
<thy-icon thyIconName="clock-circle-moment" thyIconType="fill" [ngClass]="fontSizeClass"></thy-icon>
56+
<thy-icon thyIconName="user-check" thyIconType="fill" [ngClass]="fontSizeClass"></thy-icon>
57+
<thy-icon thyIconName="user-group" thyIconType="fill" [ngClass]="fontSizeClass"></thy-icon>
58+
<thy-icon thyIconName="waring" thyIconType="fill" [ngClass]="fontSizeClass"></thy-icon>
59+
<thy-icon thyIconName="check" [ngClass]="fontSizeClass"></thy-icon>
60+
<thy-icon thyIconName="check" thyIconType="twotone" thyTwotoneColor="red" [ngClass]="fontSizeClass"></thy-icon>
61+
<thy-icon
62+
thyIconName="close-circle"
63+
thyIconType="twotone"
64+
thyTwotoneColor="red"
65+
[ngClass]="fontSizeClass"
66+
></thy-icon>
6167
</div>
6268
<pre class="mt-2"><code lang="typescript" [highlight]="basicCodeExample"></code></pre>
6369
</div>
@@ -71,6 +77,10 @@ <h2>单独添加 Icon</h2>
7177
<div class="demo-icons mt-2" [ngClass]="colorClass">
7278
<thy-icon thyIconName="thumb-up" [ngClass]="fontSizeClass"></thy-icon>
7379
<thy-icon thyIconName="bike" [ngClass]="fontSizeClass"></thy-icon>
80+
<thy-icon thyIconName="core:thumb-up" [ngClass]="fontSizeClass"></thy-icon>
81+
<thy-icon thyIconName="core:bike" [ngClass]="fontSizeClass"></thy-icon>
82+
<thy-icon thyIconName="core:account-child" [ngClass]="fontSizeClass"></thy-icon>
83+
<thy-icon thyIconName="core-inline:account-balance" [ngClass]="fontSizeClass"></thy-icon>
7484
</div>
7585
<!-- <pre class="mt-2"><code lang="typescript" [highlight]="basicCodeExample"></code></pre> -->
7686
</div>

‎demo/src/app/components/+icon/icon-section.component.ts

Lines changed: 29 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,7 @@ const INLINE_ICON_SET =
4040
</svg>
4141
`;
4242

43+
const ICON_SVG_BASE_URL = `http://pic4us.com:8888/icons`;
4344
@Component({
4445
selector: 'demo-icon-section',
4546
templateUrl: './icon-section.component.html',
@@ -52,6 +53,18 @@ export class DemoIconSectionComponent implements OnInit {
5253
description: `图标名称`,
5354
type: 'String',
5455
default: ''
56+
},
57+
{
58+
property: 'thyIconType',
59+
description: `图标类型，目前支持三种： Outlined, Filled, Two Tone, Two Tone 暂时还不完善，先不要使用`,
60+
type: 'outline | fill | twotone',
61+
default: 'outline'
62+
},
63+
{
64+
property: 'thyTwotoneColor',
65+
description: `twotone 类型的颜色值`,
66+
type: 'String',
67+
default: ''
5568
}
5669
];
5770

@@ -64,17 +77,30 @@ export class DemoIconSectionComponent implements OnInit {
6477
glyphs: any;
6578

6679
constructor(iconRegistry: ThyIconRegistry, sanitizer: DomSanitizer, private http: HttpClient) {
80+
const iconSvgUrl = `${ICON_SVG_BASE_URL}/assets/icons/defs/svg/sprite.defs.svg`;
81+
6782
iconRegistry
6883
.addSvgIconSet(
69-
sanitizer.bypassSecurityTrustResourceUrl('/assets/icons/defs/svg/sprite.defs.svg')
84+
sanitizer.bypassSecurityTrustResourceUrl(iconSvgUrl)
7085
// sanitizer.bypassSecurityTrustResourceUrl('/assets/icons/symbol/svg/sprite.symbol.svg')
7186
)
7287
.addSvgIcon('thumb-up', sanitizer.bypassSecurityTrustResourceUrl('/assets/icons/thumbup-icon.svg'))
73-
.addSvgIconLiteral('bike', sanitizer.bypassSecurityTrustHtml(BIKE_ICON));
88+
.addSvgIconLiteral('bike', sanitizer.bypassSecurityTrustHtml(BIKE_ICON))
89+
.addSvgIconInNamespace(
90+
'core',
91+
'thumb-up',
92+
sanitizer.bypassSecurityTrustResourceUrl('/assets/icons/thumbup-icon.svg')
93+
)
94+
.addSvgIconLiteralInNamespace('core', 'bike', sanitizer.bypassSecurityTrustHtml(BIKE_ICON))
95+
.addSvgIconSetInNamespace(
96+
'core',
97+
sanitizer.bypassSecurityTrustResourceUrl('/assets/icons/core-icon-set.svg')
98+
)
99+
.addSvgIconSetLiteralInNamespace('core-inline', sanitizer.bypassSecurityTrustHtml(INLINE_ICON_SET));
74100
}
75101

76102
ngOnInit(): void {
77-
this.http.get(`/assets/icons/glyphs.json`).subscribe(response => {
103+
this.http.get(`${ICON_SVG_BASE_URL}/assets/icons/glyphs.json`).subscribe(response => {
78104
this.glyphs = response;
79105
});
80106
}

‎demo/src/assets/icons/core-icon-set.svg

Lines changed: 119 additions & 0 deletions
Loading

‎src/icon/icon-registry.ts

Lines changed: 26 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,16 +20,22 @@ class SvgIconConfig {
2020
}
2121
}
2222

23+
export type IconMode = 'font' | 'svg';
24+
2325
@Injectable({
2426
providedIn: 'root'
2527
})
2628
export class ThyIconRegistry {
2729
private defaultFontSetClass = 'wt-icon';
28-
30+
private internalIconMode: IconMode = 'svg';
2931
private svgIconConfigs = new Map<string, SvgIconConfig>();
3032
private svgIconSetConfigs = new Map<string, SvgIconConfig[]>();
3133
private inProgressUrlFetches = new Map<string, Observable<string>>();
3234

35+
get iconMode() {
36+
return this.internalIconMode;
37+
}
38+
3339
constructor(
3440
private sanitizer: Sanitizer,
3541
private httpClient: HttpClient,
@@ -306,6 +312,21 @@ export class ThyIconRegistry {
306312
return this.addSvgIconSetInNamespace('', url);
307313
}
308314

315+
addSvgIconSetLiteralInNamespace(namespace: string, literal: SafeHtml): this {
316+
const sanitizedLiteral = this.sanitizer.sanitize(SecurityContext.HTML, literal);
317+
318+
if (!sanitizedLiteral) {
319+
throw this.getIconFailedToSanitizeLiteralError(literal);
320+
}
321+
322+
const svgElement = this.svgElementFromString(sanitizedLiteral);
323+
return this.internalAddSvgIconSet(namespace, new SvgIconConfig(svgElement));
324+
}
325+
326+
addSvgIconSetLiteral(literal: SafeHtml): this {
327+
return this.addSvgIconSetLiteralInNamespace('', literal);
328+
}
329+
309330
/**
310331
* Registers an icon by URL in the specified namespace.
311332
* @param namespace Namespace in which the icon should be registered.
@@ -377,4 +398,8 @@ export class ThyIconRegistry {
377398

378399
return throwError(this.getIconNameNotFoundError(key));
379400
}
401+
402+
setIconMode(mode: IconMode) {
403+
this.internalIconMode = mode;
404+
}
380405
}

0 commit comments

Comments
 (0)
0