{props.iconset.split(',').map((icon, index, array) => (
diff --git a/src/components/global/DocsCard/styles.module.scss b/src/components/global/DocsCard/styles.module.scss
index a57e862b16c..89e7e801302 100644
--- a/src/components/global/DocsCard/styles.module.scss
+++ b/src/components/global/DocsCard/styles.module.scss
@@ -131,13 +131,6 @@ docs-card[disabled]::after {
font-weight: 600;
}
- .Card-ionicon {
- width: 48px;
- height: 48px;
- float: left;
- margin-right: 1em;
- }
-
.Card-content > *:first-child {
margin-top: 0;
}
@@ -178,7 +171,6 @@ docs-card[disabled]::after {
}
.Card-size-lg .Card-icon,
- .Card-size-lg .Card-ionicon,
.Card-size-lg .Card-iconset__container {
width: 80px;
height: 80px;
diff --git a/src/components/page/intro/AppWizard/index.module.scss b/src/components/page/intro/AppWizard/index.module.scss
index 8ed19334a79..3116af2fd47 100644
--- a/src/components/page/intro/AppWizard/index.module.scss
+++ b/src/components/page/intro/AppWizard/index.module.scss
@@ -1,3 +1,5 @@
+@use '../../../../styles/mixins';
+
.appWizard {
display: flex;
align-items: center;
@@ -63,9 +65,9 @@
text-decoration: none;
}
- .wizard-button ion-icon {
- font-size: 16px;
- margin-left: 4px;
+ .wizard-button::after {
+ @include mixins.icon-mask('../../../../../static/icons/arrow-forward-outline.svg');
+ margin-inline-start: 4px;
}
}
}
diff --git a/src/components/page/intro/AppWizard/index.tsx b/src/components/page/intro/AppWizard/index.tsx
index 2a3e91692e4..5a211d66edd 100644
--- a/src/components/page/intro/AppWizard/index.tsx
+++ b/src/components/page/intro/AppWizard/index.tsx
@@ -15,7 +15,7 @@ export default function AppWizard(props: ComponentProps<'div'>) {
diff --git a/src/declarations.d.ts b/src/declarations.d.ts
index 05607352113..2265a387dbe 100644
--- a/src/declarations.d.ts
+++ b/src/declarations.d.ts
@@ -7,7 +7,6 @@
* - `device-preview`: defined in src/components/global/Playground/device-preview.js
* and registered via `defineCustomElement()`. Used by the Playground to render
* examples inside an iOS/MD device frame.
- * - `ion-icon`: registered by Ionic Framework, which the docs site loads globally.
* - `docs-card` / `docs-cards`: no JavaScript definition anywhere in this repo. They
* are unregistered tags used purely as styling hooks by DocsCard and DocsCards.
*/
@@ -17,11 +16,20 @@ import 'react';
declare module 'react' {
namespace JSX {
+ /**
+ * What a custom element accepts here. `class` rather than `className`, because
+ * these are plain elements and React passes the attribute straight through.
+ */
+ interface CustomElementProps {
+ class?: string;
+ children?: ReactNode;
+ }
+
interface IntrinsicElements {
- 'device-preview': any;
- 'ion-icon': any;
- 'docs-card': any;
- 'docs-cards': any;
+ /** `mode` is the element's only observed attribute. */
+ 'device-preview': CustomElementProps & { mode?: 'ios' | 'md' };
+ 'docs-card': CustomElementProps;
+ 'docs-cards': CustomElementProps;
}
}
}
diff --git a/src/styles/_mixins.scss b/src/styles/_mixins.scss
new file mode 100644
index 00000000000..6bdbf6c71e3
--- /dev/null
+++ b/src/styles/_mixins.scss
@@ -0,0 +1,19 @@
+/// Draws an SVG as a pseudo-element, tinted with the current text color.
+///
+/// The icon is a mask rather than a background image, so it inherits `color`
+/// from whatever it sits inside and needs no light and dark variants.
+///
+/// `$url` has to be passed by the caller rather than resolved here, because the
+/// two places this is used resolve relative paths differently. Sass inlines the
+/// partials under `components/` into `custom.scss`, so their paths are relative
+/// to `src/styles/`, while a `.module.scss` is compiled where it sits and its
+/// paths are relative to its own directory.
+@mixin icon-mask($url, $size: 12px) {
+ content: '';
+ width: $size;
+ height: $size;
+ background-color: currentColor;
+ mask-image: url($url);
+ mask-size: 100% 100%;
+ mask-repeat: no-repeat;
+}
diff --git a/src/styles/components/_navbar.scss b/src/styles/components/_navbar.scss
index ebb9364455a..c526b6ee7b8 100644
--- a/src/styles/components/_navbar.scss
+++ b/src/styles/components/_navbar.scss
@@ -1,3 +1,5 @@
+@use '../mixins';
+
html[data-theme='light'] {
--navbar-link-c: var(--c-indigo-80);
@@ -107,12 +109,7 @@ html[data-theme='dark'] {
}
&::after {
- content: '';
- width: 12px;
- height: 12px;
- mask-size: 100% 100%;
- background-color: currentColor;
- mask-image: url("../../static/icons/arrow-forward-outline.svg");
+ @include mixins.icon-mask('../../static/icons/arrow-forward-outline.svg');
margin-inline-start: 0.125rem;
}