feat(doc): add Web Types (#1300)

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);
@@ -269,6 +271,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": [
+      ]
+    }
+  }
+}