Mirrors/lucide
1
0
Fork 0
mirror of https://github.com/lucide-icons/lucide.git synced 2025-12-16 17:57:43 +01:00
Code Issues Packages Projects Releases Wiki Activity

feat(icons): also replace element on changes to other properties, do not use icon from changes, but from current state (#2316)

Browse Source
This commit is contained in:
Karsa
2024-07-22 09:29:16 +02:00
committed by GitHub
parent 54a58881da
commit eb93f112bd
1 changed files with 21 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
packages/lucide-angular/src/lib/lucide-angular.component.ts
View File

@@ -27,6 +27,7 @@ type LucideAngularComponentChanges = {
size?: TypedChange<number>;
strokeWidth?: TypedChange<number>;
absoluteStrokeWidth?: TypedChange<boolean>;
class: TypedChange<string>;
};
export function formatFixed(number: number, decimals = 3): string {
@@ -40,6 +41,7 @@ export function formatFixed(number: number, decimals = 3): string {
export class LucideAngularComponent implements OnChanges {
@Input() class?: string;
@Input() name?: string | LucideIconData;
@Input() img?: LucideIconData;
@Input() color?: string;
@Input() absoluteStrokeWidth = false;
defaultSize: number;
@@ -54,10 +56,6 @@ export class LucideAngularComponent implements OnChanges {
this.defaultSize = defaultAttributes.height;
}
@Input() set img(img: LucideIconData) {
this.name = img;
}
_size?: number;
get size(): number {
@@ -87,23 +85,31 @@ export class LucideAngularComponent implements OnChanges {
}
ngOnChanges(changes: LucideAngularComponentChanges): void {
this.color = this.color ?? this.iconConfig.color;
this.size = this.parseNumber(this.size ?? this.iconConfig.size);
this.strokeWidth = this.parseNumber(this.strokeWidth ?? this.iconConfig.strokeWidth);
this.absoluteStrokeWidth = this.absoluteStrokeWidth ?? this.iconConfig.absoluteStrokeWidth;
if (changes.name || changes.img) {
const name = changes.img?.currentValue ?? changes.name?.currentValue;
if (typeof name === 'string') {
const icoOfName = this.getIcon(this.toPascalCase(name));
if (
changes.name ||
changes.img ||
changes.color ||
changes.size ||
changes.absoluteStrokeWidth ||
changes.strokeWidth ||
changes.class
) {
this.color = this.color ?? this.iconConfig.color;
this.size = this.parseNumber(this.size ?? this.iconConfig.size);
this.strokeWidth = this.parseNumber(this.strokeWidth ?? this.iconConfig.strokeWidth);
this.absoluteStrokeWidth = this.absoluteStrokeWidth ?? this.iconConfig.absoluteStrokeWidth;
const nameOrIcon = this.img ?? this.name;
if (typeof nameOrIcon === 'string') {
const icoOfName = this.getIcon(this.toPascalCase(nameOrIcon));
if (icoOfName) {
this.replaceElement(icoOfName);
} else {
throw new Error(
`The "${name}" icon has not been provided by any available icon providers.`,
`The "${nameOrIcon}" icon has not been provided by any available icon providers.`,
);
}
} else if (Array.isArray(name)) {
this.replaceElement(name);
} else if (Array.isArray(nameOrIcon)) {
this.replaceElement(nameOrIcon);
} else {
throw new Error(`No icon name or image has been provided.`);
}