feat(): support ios/md attribute of ion-icon (#39)

* feat(): support ios/md attribute of ion-icon

Author: rdlabo

packages/cli/src/angular/migrations/standalone/0002-import-standalone-component.test.ts

@@ -132,7 +132,7 @@ describe("migrateComponents", () => {
 
         @Component({
           selector: 'my-component',
-          template: '<ion-icon name="logo-ionic"></ion-icon>',
+          template: '<ion-icon name="logo-ionic" ios="add" md="remove"></ion-icon>',
           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: '<ion-icon name="logo-ionic"></ion-icon>',
+            template: '<ion-icon name="logo-ionic" ios="add" md="remove"></ion-icon>',
             standalone: true,
             imports: [IonIcon]
         })
         export class MyComponent {
             constructor() {
-                addIcons({ logoIonic });
+                addIcons({ logoIonic, add, remove });
             }
         }
       `),

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:
-             * <ion-icon name="'user'"></ion-icon>
-             */
-            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:
+               * <ion-icon name="'user'"></ion-icon>
+               */
+              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);
             }
           }
         }