diff --git a/packages/cli/src/angular/migrations/standalone/0002-import-standalone-component.test.ts b/packages/cli/src/angular/migrations/standalone/0002-import-standalone-component.test.ts
index 67b1ad7..0f6a75c 100644
--- a/packages/cli/src/angular/migrations/standalone/0002-import-standalone-component.test.ts
+++ b/packages/cli/src/angular/migrations/standalone/0002-import-standalone-component.test.ts
@@ -132,7 +132,7 @@ describe("migrateComponents", () => {
@Component({
selector: 'my-component',
- template: '',
+ template: '',
standalone: true
})
export class MyComponent { }
@@ -149,18 +149,18 @@ describe("migrateComponents", () => {
dedent(`
import { Component } from "@angular/core";
import { addIcons } from "ionicons";
- import { logoIonic } from "ionicons/icons";
+ import { logoIonic, add, remove } from "ionicons/icons";
import { IonIcon } from "@ionic/angular/standalone";
@Component({
selector: 'my-component',
- template: '',
+ template: '',
standalone: true,
imports: [IonIcon]
})
export class MyComponent {
constructor() {
- addIcons({ logoIonic });
+ addIcons({ logoIonic, add, remove });
}
}
`),
diff --git a/packages/cli/src/angular/migrations/standalone/0002-import-standalone-component.ts b/packages/cli/src/angular/migrations/standalone/0002-import-standalone-component.ts
index ece332e..0316123 100644
--- a/packages/cli/src/angular/migrations/standalone/0002-import-standalone-component.ts
+++ b/packages/cli/src/angular/migrations/standalone/0002-import-standalone-component.ts
@@ -267,68 +267,70 @@ function detectIonicComponentsAndIcons(htmlAsString: string, filePath: string) {
}
if (node.name === "ion-icon") {
- const staticNameAttribute = node.attributes.find(
- (a: any) => a.name === "name" || a.name === "icon",
- );
-
- if (staticNameAttribute) {
- const iconName = staticNameAttribute.value;
- if (!ionIcons.includes(iconName)) {
- ionIcons.push(iconName);
- }
- } else {
- const boundNameAttribute = node.inputs.find(
- (a: any) => a.name === "name" || a.name === "icon",
+ for (const attribute of ["name", "icon", "ios", "md"]) {
+ const staticNameAttribute = node.attributes.find(
+ (a: any) => a.name === attribute,
);
- if (boundNameAttribute) {
- const skippedIcon = node.sourceSpan.toString();
-
- const iconNameRegex = /{{\s*'([^']+)'\s*}}/;
- /**
- * Attempt to find the icon name from the bound name attribute
- * when the developer has a template like this:
- *
- */
- const iconNameMatch = skippedIcon.match(iconNameRegex);
-
- const deepGetIconConditional = (
- ast: typeof boundNameAttribute.value.ast,
- icons: string[],
- ): string[] => {
- if (ast.trueExp.type === "LiteralPrimitive") {
- if (!ionIcons.includes(ast.trueExp.value)) {
- ionIcons.push(ast.trueExp.value);
+ if (staticNameAttribute) {
+ const iconName = staticNameAttribute.value;
+ if (!ionIcons.includes(iconName)) {
+ ionIcons.push(iconName);
+ }
+ } else {
+ const boundNameAttribute = node.inputs.find(
+ (a: any) => a.name === attribute,
+ );
+
+ if (boundNameAttribute) {
+ const skippedIcon = node.sourceSpan.toString();
+
+ const iconNameRegex = /{{\s*'([^']+)'\s*}}/;
+ /**
+ * Attempt to find the icon name from the bound name attribute
+ * when the developer has a template like this:
+ *
+ */
+ const iconNameMatch = skippedIcon.match(iconNameRegex);
+
+ const deepGetIconConditional = (
+ ast: typeof boundNameAttribute.value.ast,
+ icons: string[],
+ ): string[] => {
+ if (ast.trueExp.type === "LiteralPrimitive") {
+ if (!ionIcons.includes(ast.trueExp.value)) {
+ ionIcons.push(ast.trueExp.value);
+ }
+ } else if (ast.trueExp.type === "Conditional") {
+ deepGetIconConditional(ast.trueExp, icons);
+ } else {
+ skippedIconsHtml.push(skippedIcon);
}
- } else if (ast.trueExp.type === "Conditional") {
- deepGetIconConditional(ast.trueExp, icons);
- } else {
- skippedIconsHtml.push(skippedIcon);
- }
- if (ast.falseExp.type === "LiteralPrimitive") {
- if (!ionIcons.includes(ast.falseExp.value)) {
- ionIcons.push(ast.falseExp.value);
+ if (ast.falseExp.type === "LiteralPrimitive") {
+ if (!ionIcons.includes(ast.falseExp.value)) {
+ ionIcons.push(ast.falseExp.value);
+ }
+ } else if (ast.falseExp.type === "Conditional") {
+ deepGetIconConditional(ast.falseExp, icons);
+ } else {
+ skippedIconsHtml.push(skippedIcon);
+ }
+ return icons;
+ };
+
+ if (iconNameMatch) {
+ if (!ionIcons.includes(iconNameMatch[1])) {
+ ionIcons.push(iconNameMatch[1]);
}
- } else if (ast.falseExp.type === "Conditional") {
- deepGetIconConditional(ast.falseExp, icons);
+ } else if (boundNameAttribute.value.ast.type === "Conditional") {
+ deepGetIconConditional(boundNameAttribute.value.ast, ionIcons);
} else {
+ // IonIcon name is a calculated value from a variable or function.
+ // We can't determine the value of the name at this time.
+ // The developer will need to manually import these icons.
skippedIconsHtml.push(skippedIcon);
}
- return icons;
- };
-
- if (iconNameMatch) {
- if (!ionIcons.includes(iconNameMatch[1])) {
- ionIcons.push(iconNameMatch[1]);
- }
- } else if (boundNameAttribute.value.ast.type === "Conditional") {
- deepGetIconConditional(boundNameAttribute.value.ast, ionIcons);
- } else {
- // IonIcon name is a calculated value from a variable or function.
- // We can't determine the value of the name at this time.
- // The developer will need to manually import these icons.
- skippedIconsHtml.push(skippedIcon);
}
}
}