Merge branch 'feature-7.3.0' into icon-gitlab

.github/workflows/release.yml

@@ -55,13 +55,22 @@ jobs:
       env:
         GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
       shell: bash
-    # Lerna does not automatically bump versions
-    # of Ionicons dependencies that have changed,
-    # so we do that here.
-    - name: Bump Package Lock
-      run: |
-        npx lerna exec "npm install --package-lock-only --legacy-peer-deps"
-        git add .
-        git commit -m "chore(): update package lock files"
-        git push
-      shell: bash
+
+  update-package-lock:
+    # This needs to run after finalize-release
+    # because we also push to the repo in that
+    # job. If these jobs ran in parallel then it is
+    # possible for them to push at the same time.
+    needs: [finalize-release]
+    runs-on: ubuntu-latest
+    steps:
+      # Lerna does not automatically bump versions
+      # of Ionicons dependencies that have changed,
+      # so we do that here.
+      - name: Bump Package Lock
+        run: |
+          npx lerna exec "npm install --package-lock-only --legacy-peer-deps"
+          git add .
+          git commit -m "chore(): update package lock files"
+          git push
+        shell: bash

package.json

@@ -74,5 +74,6 @@
   "license": "MIT",
   "sideEffects": [
     "icons/imports/"
-  ]
+  ],
+  "web-types": "dist/ionic.web-types.json"
 }

scripts/build.ts

@@ -31,6 +31,8 @@ async function build(rootDir: string) {
 
     await createCheatsheet(version, rootDir, distDir, svgSymbolsContent, srcSvgData);
 
+    await createWebTypes(version, rootDir, distDir, srcSvgData);
+
     await copyToTesting(rootDir, distDir, srcSvgData);
   } catch (e) {
     console.error(e);
@@ -273,6 +275,31 @@ async function createCheatsheet(
   await fs.writeFile(distCheatsheetFilePath, html);
 }
 
+async function createWebTypes(
+  version: string,
+  rootDir: string,
+  distDir: any,
+  srcSvgData: SvgData[]
+) {
+  const srcWebTypeFilePath = join(rootDir, 'src/ionicons.web-types.json');
+  const distWebTypesFilePath = join(distDir, 'ionicons.web-types.json');
+
+  const webTypes = JSON.parse(await fs.readFile(srcWebTypeFilePath, 'utf8'))
+
+  webTypes.version = version
+
+  const icons = webTypes.contributions.html.ionicons
+  for (let data of srcSvgData) {
+    icons.push({
+      name: data.iconName,
+      icon: "dist/svg/" + data.fileName
+    })
+  }
+
+  const jsonStr = JSON.stringify(webTypes, null, 2) + '\n';
+  await fs.writeFile(distWebTypesFilePath, jsonStr);
+}
+
 async function getSvgs(srcSvgDir: string, distSvgDir: string, distIoniconsDir: string): Promise<SvgData[]> {
   const optimizedSvgDir = join(distIoniconsDir, 'svg');
   await fs.emptyDir(optimizedSvgDir);

src/ionicons.web-types.json

@@ -0,0 +1,95 @@
+{
+  "$schema": "http://json.schemastore.org/web-types",
+  "name": "ionicons",
+  "version": "0.0.0",
+  "description-markup": "markdown",
+  "contributions": {
+    "html": {
+      "elements": [
+        {
+          "name": "ion-icon",
+          "description": "The Ionicons Web Component is an easy and performant way to use Ionicons in your app. The component will dynamically load an SVG for each icon, so your app is only requesting the icons that you need.",
+          "doc-url": "https://ionic.io/ionicons/usage",
+          "attributes": [
+            {
+              "name": "name",
+              "description": "The name of the built-in icon from the Ionicons package.",
+              "priority": "high",
+              "doc-url": "https://ionic.io/ionicons/usage#basic-usage",
+              "value": {
+                "type": "symbol"
+              },
+              "values": [
+                {
+                  "name": "The ion-icon",
+                  "pattern": {
+                    "items": "ionicons"
+                  }
+                }
+              ]
+            },
+            {
+              "name": "src",
+              "priority": "high",
+              "description": "Provide url of a custom SVG icon. The `src` attribute works the same as `<img src=\"...\">` in that the url must be accessible from the webpage that's making a request for the image. Additionally, the external file can only be a valid `svg` and does not allow scripts or events within the `svg` element.",
+              "doc-url": "https://ionic.io/ionicons/usage#basic-usage"
+            },
+            {
+              "name": "md",
+              "description": "Provide icon variant specific to MD platform",
+              "priority": "high",
+              "doc-url": "https://ionic.io/ionicons/usage#basic-usage",
+              "value": {
+                "type": "symbol"
+              },
+              "values": [
+                {
+                  "name": "The ion-icon",
+                  "pattern": {
+                    "items": "ionicons"
+                  }
+                }
+              ]
+            },
+            {
+              "name": "ios",
+              "description": "Provide icon variant specific to iOS platform",
+              "priority": "high",
+              "doc-url": "https://ionic.io/ionicons/usage#basic-usage",
+              "value": {
+                "type": "symbol"
+              },
+              "values": [
+                {
+                  "name": "The ion-icon",
+                  "pattern": {
+                    "items": "ionicons"
+                  }
+                }
+              ]
+            },
+            {
+              "name": "size",
+              "description": "Specify the icon size using one of the pre-defined font sizes.\n\nAlternatively you can set a specific size by applying the `font-size` CSS property on the `ion-icon` component. It's recommended to use pixel sizes that are a multiple of 8 (8, 16, 32, 64, etc.)",
+              "doc-url": "https://ionic.io/ionicons/usage#basic-usage",
+              "priority": "high",
+              "value": {
+                "type": "enum"
+              },
+              "values": [
+                {
+                  "name": "small"
+                },
+                {
+                  "name": "large"
+                }
+              ]
+            }
+          ]
+        }
+      ],
+      "ionicons": [
+      ]
+    }
+  }
+}