chore(styles): remove ion-icon and share the arrow mask mixin

src/components/global/DocDemo/demo.css

@@ -172,9 +172,6 @@ docs-demo {
   justify-content: center;
 }
 
-.docs-demo-source > ion-icon {
-  margin-right: 5px;
-}
 /* 
 @media (max-width: 1160px) {
   .docs-demo-device,

src/components/global/DocDemo/index.js

@@ -58,7 +58,7 @@ const DocDemo = (props) => {
 
   const sourceLink = (
     <a href={props.source} className="docs-demo-source" target="_blank" title="Demo Source">
-      {/* <ion-icon name="open" /> */} View Source
+      View Source
     </a>
   );
 

src/components/global/DocsCard/index.tsx

@@ -11,7 +11,6 @@ interface Props extends React.HTMLAttributes<HTMLDivElement> {
   icon?: string;
   hoverIcon?: string;
   iconset?: string;
-  ionicon?: string;
   img?: string;
   size?: 'md' | 'lg';
 }
@@ -32,7 +31,6 @@ function DocsCard(props: Props): ReactNode {
             {hoverIcon && <img src={useBaseUrl(hoverIcon)} className="Card-icon Card-icon-hover" />}
           </div>
         )}
-        {props.ionicon && <ion-icon name={props.ionicon} className="Card-ionicon"></ion-icon>}
         {props.iconset && (
           <div className="Card-icon-row">
             {props.iconset.split(',').map((icon, index, array) => (

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;

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;
     }
   }
 }

src/components/page/intro/AppWizard/index.tsx

@@ -15,7 +15,7 @@ export default function AppWizard(props: ComponentProps<'div'>) {
       </div>
       <div>
         <a href="https://ionicframework.com/start" className="wizard-button">
-          Open Wizard <ion-icon name="arrow-forward-outline" />
+          Open Wizard
         </a>
       </div>
     </div>

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;
     }
   }
 }

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;
+}

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;
         }