diff --git a/jest.config.mjs b/jest.config.mjs index 5776c48a4..e30b3937f 100644 --- a/jest.config.mjs +++ b/jest.config.mjs @@ -6,8 +6,9 @@ import { createJestStencilPreset } from 'jest-stencil-runner'; const __dirname = path.dirname(url.fileURLToPath(import.meta.url)); export default createJestStencilPreset({ - rootDir: __dirname, + rootDir: __dirname, // Add any additional Jest configuration here + setupFilesAfterEnv: ['/jest.setup.js'], collectCoverageFrom: [ 'src/**/*.{ts,tsx}', '!src/**/*.d.ts', diff --git a/jest.setup.js b/jest.setup.js new file mode 100644 index 000000000..5eed6c10a --- /dev/null +++ b/jest.setup.js @@ -0,0 +1,2 @@ +const Stencil = require('@stencil/core'); +Stencil.Build.isBrowser = true; diff --git a/src/components/icon/icon.css b/src/components/icon/icon.css index 4c22da6e9..233ebe89a 100644 --- a/src/components/icon/icon.css +++ b/src/components/icon/icon.css @@ -4,12 +4,13 @@ width: 1em; height: 1em; - contain: strict; + font-size: 1em; + + contain: layout style; fill: currentColor; box-sizing: content-box !important; - } :host .ionicon { @@ -24,7 +25,16 @@ stroke-width: var(--ionicon-stroke-width, 32px); } -.icon-inner, +.icon-inner { + display: flex; + + align-items: center; + justify-content: center; + + width: 100%; + height: 100%; +} + .ionicon, svg { display: block; @@ -33,6 +43,14 @@ svg { width: 100%; } +/* Slotted Content + * ----------------------------------------------------------- + */ + +::slotted(*) { + font-size: inherit !important; +} + /* Icon RTL * ----------------------------------------------------------- */ diff --git a/src/components/icon/icon.tsx b/src/components/icon/icon.tsx index 2fb162c94..84e4a9622 100755 --- a/src/components/icon/icon.tsx +++ b/src/components/icon/icon.tsx @@ -221,7 +221,9 @@ export class Icon { {Build.isBrowser && this.svgContent ? (
) : ( -
+
+ +
)} ); diff --git a/src/components/icon/test/a11y/index.html b/src/components/icon/test/a11y/index.html index 8e5792982..038e94c84 100644 --- a/src/components/icon/test/a11y/index.html +++ b/src/components/icon/test/a11y/index.html @@ -8,6 +8,9 @@ + + + @@ -16,16 +19,35 @@

Icon - Accessibility

-

Icon with aria-label

+

SVG icon with aria-label

-

Button with aria-label

+

Button with aria-label and SVG icon

-

Icon with aria-hidden

+

SVG icon with aria-hidden

+ +
+ +

Font icon with aria-label

+ + + + +

Button with aria-label and font icon

+ + +

Font icon with aria-hidden

+
diff --git a/src/components/icon/test/basic/index.html b/src/components/icon/test/basic/index.html index 0a5e64358..260bae789 100644 --- a/src/components/icon/test/basic/index.html +++ b/src/components/icon/test/basic/index.html @@ -51,29 +51,29 @@

Stroke width

Font size

- +

Custom SVGs

- - - - - - - - - + + + + + + + + +

Custom SVGs: colors

- - - - - - - - - + + + + + + + + +

Custom CSS

@@ -82,9 +82,9 @@

Custom CSS

- - - + + +