-
-
-
-
+
Ionicons Icon Component
+
+
+
+
Native SVG Icons
+
+ Default
+
+
+
+
+
+
+
+
+
+
+ Mode from html ios mode attribute
+
+
+
+ Mode set on icon
+
+
+
+ Colors
+
+
+
+
+
+
+
+
+
+
+ Stroke width
+
+
+ Font size
+
+
+
+ Custom SVGs
+
+
+
+
+
+
+
+
+
+
+ Custom SVGs: colors
+
+
+
+
+
+
+
+
+
+
+ Custom CSS
+
+
+
+
+
+
+
+
+
+
+ Aria
+
+
+
+
+ Sanitized (shouldn't show)
+
+
+ Not Sanitized (should show)
+
+
+ Base64 url
+
-
Un-flip: chevrons
-
-
-
-
-
+
+
RTL
+
+
Default: Non-arrows
+
+
+
+
+
+
Flip: Non-arrows
+
+
+
+
+
+
Auto Flip: arrows
+
+
+
+
+
+
Un-flip: arrows
+
+
+
+
+
+
Auto Flip: chevrons
+
+
+
+
+
+
+
+
Un-flip: chevrons
+
+
+
+
+
+
+
+
Auto Flip, RTL on components
+
+
+
+
-
Auto Flip, RTL on components
-
-
-
-
-
+
+
Font-Based Icons
+
+ Material Icons
+
+ home
+
+
+ favorite
+
+
+ star
+
+
+ person
+
+
+ settings
+
+
+ Material Icons with Color
+
+ home
+
+
+ favorite
+
+
+ star
+
+
+ warning
+
+
+ delete
+
+
+ Material Icons with Custom Size
+
+ home
+
+
+ favorite
+
+
+ star
+
+
+
+
+ Phosphor Icons
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Phosphor Icons with Color
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Phosphor Icons with Custom Size
+
+
+
+
+
+
+
+
+
+
+
+
+ Font Awesome Icons
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
- Sanitized (shouldn't show)
-
+ Font Awesome Icons with Color
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
- Not Sanitized (should show)
-
+ Font Awesome Icons with Custom Size
+
+
+
+
+
+
+
+
+
- Base64 url
-
+
+
+ Bootstrap Icons
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Bootstrap Icons with Color
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Bootstrap Icons with Custom Size
+
+
+
+
+
+
+
+
+
+
+
Cheatsheet
@@ -154,21 +370,33 @@
Base64 url
html {
font-size: 32px;
}
-
+
body {
margin: 0;
padding: 16px;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
+ .grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+ gap: 40px;
+ margin-top: 20px;
+ }
+
h1 {
- margin: 15px 0 5px;
- font-size: 25px;
+ margin: 0 0 20px;
+ font-size: 28px;
}
h2 {
- margin: 15px 0 5px;
- font-size: 18px;
+ margin: 0 0 15px;
+ font-size: 20px;
+ }
+
+ h3 {
+ margin: 15px 0 8px;
+ font-size: 16px;
}
.custom {
From 175fed229e5222652c953e7481e33576f46398d2 Mon Sep 17 00:00:00 2001
From: Brandy Smith <6577830+brandyscarney@users.noreply.github.com>
Date: Tue, 21 Jul 2026 15:37:48 -0400
Subject: [PATCH 02/19] test(ionicons): refactor the tests to individual pages
with shared styles
---
package.json | 5 +-
scripts/build.ts | 31 ++-
scripts/cheatsheet-template.html | 41 ----
scripts/watch-tests.ts | 58 +++++
src/components.d.ts | 231 ++++++++---------
src/index.html | 409 ++-----------------------------
src/tests/a11y.html | 29 +++
src/tests/basic.html | 97 ++++++++
src/tests/cheatsheet.html | 37 +++
src/tests/header.js | 14 ++
src/tests/rtl.html | 66 +++++
src/tests/sanitization.html | 31 +++
src/tests/slotted.html | 295 ++++++++++++++++++++++
src/tests/styles.css | 86 +++++++
14 files changed, 873 insertions(+), 557 deletions(-)
delete mode 100644 scripts/cheatsheet-template.html
create mode 100644 scripts/watch-tests.ts
create mode 100644 src/tests/a11y.html
create mode 100644 src/tests/basic.html
create mode 100644 src/tests/cheatsheet.html
create mode 100644 src/tests/header.js
create mode 100644 src/tests/rtl.html
create mode 100644 src/tests/sanitization.html
create mode 100644 src/tests/slotted.html
create mode 100644 src/tests/styles.css
diff --git a/package.json b/package.json
index ceec1f999..5bb1529b7 100755
--- a/package.json
+++ b/package.json
@@ -48,11 +48,14 @@
"build.component": "stencil build",
"build.collection": "tsx scripts/collection-copy.ts",
"clean": "rimraf dist components icons www",
+ "lint": "npm run prettier -- --write",
"prettier": "npm run prettier.base -- --write",
"prettier.base": "prettier --cache \"./({bin,scripts,src,test}/**/*.{ts,tsx,js,jsx})|bin/stencil|.github/(**/)?*.(yml|yaml)|*.js\"",
"prettier.dry-run": "npm run prettier.base -- --list-different",
- "start": "run-s build.files start.stencil",
+ "start": "run-s build.files start.dev",
+ "start.dev": "run-p start.stencil start.watch-tests",
"start.stencil": "stencil build --dev --watch --serve",
+ "start.watch-tests": "tsx scripts/watch-tests.ts",
"test": "run-s test.spec",
"test.spec": "jest",
"test.e2e": "playwright test",
diff --git a/scripts/build.ts b/scripts/build.ts
index 487dbaadc..11377856e 100644
--- a/scripts/build.ts
+++ b/scripts/build.ts
@@ -98,9 +98,19 @@ async function copyToTesting(rootDir: string, distDir: string, srcSvgData: SvgDa
const testDir = path.join(rootDir, 'www');
const testBuildDir = path.join(testDir, 'build');
const testSvgDir = path.join(testBuildDir, 'svg');
+ const srcTestDir = path.join(rootDir, 'src', 'tests');
+ const testTestDir = path.join(testDir, 'tests');
+ const srcTestAssetsDir = path.join(rootDir, 'src', 'components', 'test');
+ const testAssetsDir = path.join(testTestDir, 'assets');
// Ensure all directories exist
- await Promise.all([fs.ensureDir(testDir), fs.ensureDir(testBuildDir), fs.ensureDir(testSvgDir)]);
+ await Promise.all([
+ fs.ensureDir(testDir),
+ fs.ensureDir(testBuildDir),
+ fs.ensureDir(testSvgDir),
+ fs.ensureDir(testTestDir),
+ fs.ensureDir(testAssetsDir),
+ ]);
await Promise.all(
srcSvgData
@@ -112,8 +122,19 @@ async function copyToTesting(rootDir: string, distDir: string, srcSvgData: SvgDa
);
const distCheatsheetFilePath = path.join(distDir, 'cheatsheet.html');
- const testCheatsheetFilePath = path.join(testDir, 'cheatsheet.html');
- await fs.copyFile(distCheatsheetFilePath, testCheatsheetFilePath);
+ const testCheatsheetFilePath = path.join(testTestDir, 'cheatsheet.html');
+ const srcIndexFilePath = path.join(rootDir, 'src', 'index.html');
+ const testIndexFilePath = path.join(testDir, 'index.html');
+
+ await Promise.all([
+ fs.copyFile(distCheatsheetFilePath, testCheatsheetFilePath),
+ fs.copyFile(srcIndexFilePath, testIndexFilePath),
+ fs.copy(srcTestDir, testTestDir, { overwrite: true, filter: (src) => !src.endsWith('cheatsheet.html') }),
+ fs.copy(srcTestAssetsDir, testAssetsDir, {
+ overwrite: true,
+ filter: (src) => src.endsWith('.svg') || src.endsWith('.html'),
+ }),
+ ]);
}
async function createSvgSymbols(version: string, distDir: string, srcSvgData: SvgData[]) {
@@ -164,12 +185,12 @@ async function createCheatsheet(
svgSymbolsContent: string,
srcSvgData: SvgData[],
) {
- const CheatsheetTmpFilePath = path.join(rootDir, 'scripts', 'cheatsheet-template.html');
+ const CheatsheetTmpFilePath = path.join(rootDir, 'src', 'tests', 'cheatsheet.html');
const distCheatsheetFilePath = path.join(distDir, 'cheatsheet.html');
const c = srcSvgData.map(
(svgData) =>
- `
`,
+ `
`,
);
c.push(svgSymbolsContent);
diff --git a/scripts/cheatsheet-template.html b/scripts/cheatsheet-template.html
deleted file mode 100644
index 43796a0bb..000000000
--- a/scripts/cheatsheet-template.html
+++ /dev/null
@@ -1,41 +0,0 @@
-
-
-
-
-
Ionicons {{version}} Cheatsheet
-
-
-
-
Ionicons {{version}} Cheatsheet
-
{{count}} icons
-
-{{content}}
-
-
diff --git a/scripts/watch-tests.ts b/scripts/watch-tests.ts
new file mode 100644
index 000000000..635628472
--- /dev/null
+++ b/scripts/watch-tests.ts
@@ -0,0 +1,58 @@
+import path from 'node:path';
+import fs from 'fs-extra';
+import { watch } from 'node:fs';
+import { spawn } from 'node:child_process';
+
+const rootDir = path.join(__dirname, '..');
+const srcTestDir = path.join(rootDir, 'src', 'tests');
+const srcIndexPath = path.join(rootDir, 'src', 'index.html');
+const wwwTestDir = path.join(rootDir, 'www', 'tests');
+const wwwIndexPath = path.join(rootDir, 'www', 'index.html');
+
+async function copyFiles() {
+ try {
+ await Promise.all([
+ fs.copy(srcTestDir, wwwTestDir, { overwrite: true, filter: (src) => !src.endsWith('cheatsheet.html') }),
+ fs.copyFile(srcIndexPath, wwwIndexPath, fs.constants.COPYFILE_FICLONE),
+ ]);
+ } catch (e) {
+ console.error('Error copying files:', e);
+ }
+}
+
+async function regenerateCheatsheet() {
+ return new Promise
((resolve, reject) => {
+ const proc = spawn('npm', ['run', 'build.files'], {
+ cwd: rootDir,
+ stdio: 'inherit',
+ });
+ proc.on('close', (code) => {
+ if (code === 0) {
+ resolve();
+ } else {
+ reject(new Error(`build.files exited with code ${code}`));
+ }
+ });
+ });
+}
+
+// Initial copy
+copyFiles();
+
+// Watch for changes
+const watcher = watch(srcTestDir, { recursive: true }, (eventType, filename) => {
+ if (filename === 'cheatsheet.html' || filename?.endsWith('cheatsheet.html')) {
+ regenerateCheatsheet().catch((e) => console.error('Error regenerating cheatsheet:', e));
+ } else {
+ copyFiles();
+ }
+});
+
+watch(srcIndexPath, () => {
+ copyFiles();
+});
+
+process.on('SIGINT', () => {
+ watcher.close();
+ process.exit(0);
+});
diff --git a/src/components.d.ts b/src/components.d.ts
index 8cb296879..c78ab7bc5 100644
--- a/src/components.d.ts
+++ b/src/components.d.ts
@@ -4,127 +4,128 @@
* This is an autogenerated file created by the Stencil compiler.
* It contains typing information for all components that exist in this project.
*/
-import { HTMLStencilElement, JSXBase } from '@stencil/core/internal';
+import { HTMLStencilElement, JSXBase } from "@stencil/core/internal";
export namespace Components {
- interface IonIcon {
- /**
- * The color to use for the background of the item.
- */
- color?: string;
- /**
- * Specifies whether the icon should horizontally flip when `dir` is `"rtl"`.
- */
- flipRtl?: boolean;
- /**
- * A combination of both `name` and `src`. If a `src` url is detected it will set the `src` property. Otherwise it assumes it's a built-in named SVG and set the `name` property.
- */
- icon?: any;
- /**
- * Specifies which icon to use on `ios` mode.
- */
- ios?: string;
- /**
- * If enabled, ion-icon will be loaded lazily when it's visible in the viewport. Default, `false`.
- * @default false
- */
- lazy: boolean;
- /**
- * Specifies which icon to use on `md` mode.
- */
- md?: string;
- /**
- * The mode determines which platform styles to use.
- * @default getIonMode()
- */
- mode: string;
- /**
- * Specifies which icon to use from the built-in set of icons.
- */
- name?: string;
- /**
- * When set to `false`, SVG content that is HTTP fetched will not be checked if the response SVG content has any `
-
-
-
-
-
-
-
-
+
- Ionicons Icon Component
-
-
-
-
Native SVG Icons
-
- Default
-
-
-
-
-
-
-
-
-
-
- Mode from html ios mode attribute
-
-
-
- Mode set on icon
-
-
-
- Colors
-
-
-
-
-
-
-
-
-
-
- Stroke width
-
-
- Font size
-
-
-
- Custom SVGs
-
-
-
-
-
-
-
-
-
-
- Custom SVGs: colors
-
-
-
-
-
-
-
-
-
-
- Custom CSS
-
-
-
-
-
-
-
-
-
-
- Aria
-
-
-
-
- Sanitized (shouldn't show)
-
-
- Not Sanitized (should show)
-
-
- Base64 url
-
-
-
-
-
RTL
-
-
Default: Non-arrows
-
-
-
-
-
-
Flip: Non-arrows
-
-
-
-
-
-
Auto Flip: arrows
-
-
-
-
-
-
Un-flip: arrows
-
-
-
-
-
-
Auto Flip: chevrons
-
-
-
-
-
-
-
-
Un-flip: chevrons
-
-
-
-
-
-
-
-
Auto Flip, RTL on components
-
-
-
-
-
-
-
-
Font-Based Icons
-
- Material Icons
-
- home
-
-
- favorite
-
-
- star
-
-
- person
-
-
- settings
-
-
- Material Icons with Color
-
- home
-
-
- favorite
-
-
- star
-
-
- warning
-
-
- delete
-
-
- Material Icons with Custom Size
-
- home
-
-
- favorite
-
-
- star
-
-
-
-
- Phosphor Icons
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Phosphor Icons with Color
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Phosphor Icons with Custom Size
-
-
-
-
-
-
-
-
-
-
-
-
- Font Awesome Icons
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Font Awesome Icons with Color
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Font Awesome Icons with Custom Size
-
-
-
-
-
-
-
-
-
-
-
-
- Bootstrap Icons
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Bootstrap Icons with Color
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Bootstrap Icons with Custom Size
-
-
-
-
-
-
-
-
-
-
-
- Cheatsheet
-
-
-
+
+ Ionicons Icon Component
+
+ Test Pages
+
+