From dcbe0f4cd16f0363565b51f4a6a9374f8a91eb03 Mon Sep 17 00:00:00 2001 From: Piotr Tomiak Date: Mon, 6 Nov 2023 11:13:25 +0100 Subject: [PATCH 1/2] feat(doc): add Web Types (#1300) --- package.json | 3 +- scripts/build.ts | 27 +++++++++++ src/ionicons.web-types.json | 95 +++++++++++++++++++++++++++++++++++++ 3 files changed, 124 insertions(+), 1 deletion(-) create mode 100644 src/ionicons.web-types.json diff --git a/package.json b/package.json index 2d7121f69..bb2cccf15 100755 --- a/package.json +++ b/package.json @@ -74,5 +74,6 @@ "license": "MIT", "sideEffects": [ "icons/imports/" - ] + ], + "web-types": "dist/ionic.web-types.json" } diff --git a/scripts/build.ts b/scripts/build.ts index 7e8b686ea..bf533ccaa 100644 --- a/scripts/build.ts +++ b/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 { const optimizedSvgDir = join(distIoniconsDir, 'svg'); await fs.emptyDir(optimizedSvgDir); diff --git a/src/ionicons.web-types.json b/src/ionicons.web-types.json new file mode 100644 index 000000000..d2112ff16 --- /dev/null +++ b/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 `` 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": [ + ] + } + } +} From 455c811839c56f8bfe2f99dd3d32f54828f465bf Mon Sep 17 00:00:00 2001 From: Liam DeBeasi Date: Wed, 15 Nov 2023 11:47:22 -0500 Subject: [PATCH 2/2] Update build.ts --- scripts/build.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/scripts/build.ts b/scripts/build.ts index bf533ccaa..8ff4e4a8e 100644 --- a/scripts/build.ts +++ b/scripts/build.ts @@ -31,7 +31,7 @@ async function build(rootDir: string) { await createCheatsheet(version, rootDir, distDir, svgSymbolsContent, srcSvgData); - await createWebTypes(version, rootDir, distDir, srcSvgData) + await createWebTypes(version, rootDir, distDir, srcSvgData); await copyToTesting(rootDir, distDir, srcSvgData); } catch (e) {