Replace emoji icons with premium Lucide SVG icons on docs landing page (#929)

* Replace emoji icons with premium Lucide SVG icons on docs landing page

Emojis rendered inconsistently across platforms and felt informal for a
premium developer tool. This swaps all 12 card icons with hand-picked
Lucide line SVGs that render in the site accent color, stay crisp at any
resolution, and look identical across every browser and OS.

* Remove remaining inline emojis and add linting instructions for agents

- Remove decorative emojis from simulator-camera-support.md and recordings.md
- Add "After Making Changes" section to docs/CLAUDE.md with lint/format/typecheck/build steps
- Create docs/AGENTS.md with the same instructions for non-Claude agents
- Fix Prettier formatting in FeatureCard.astro

* Add aria-hidden and focusable=false to decorative card SVG icons

These icons are purely decorative (the card title/description convey
meaning), so they should be hidden from the accessibility tree to avoid
unlabeled graphic noise for screen reader users.

Author: AvdLee

docs/AGENTS.md

@@ -0,0 +1,10 @@
+# Docs Agent Guidelines
+
+## After Making Changes
+
+Always run these checks from the `docs/` directory after modifying files:
+
+1. `npm run lint` - Verify ESLint passes
+2. `npm run format:check` - Verify Prettier formatting
+3. `npm run typecheck` - Verify TypeScript types
+4. `npm run build` - Verify production build succeeds

docs/CLAUDE.md

@@ -26,6 +26,15 @@ To use an MCP server tool:
 1. First load it with ToolSearch: `query: "select:mcp__astro-docs__search_astro_docs"`
 2. Then call the tool directly
 
+## After Making Changes
+
+Always run these checks after modifying files in this project:
+
+1. `npm run lint` - Verify ESLint passes
+2. `npm run format:check` - Verify Prettier formatting
+3. `npm run typecheck` - Verify TypeScript types
+4. `npm run build` - Verify production build succeeds
+
 ## Code Style Guidelines
 
 - Use TypeScript with strict type checking

docs/src/components/starlight/CardIcon.astro

@@ -0,0 +1,27 @@
+---
+interface Props {
+  name: string;
+}
+
+const { name } = Astro.props;
+
+const svgAttrs =
+  'xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"';
+
+const icons: Record<string, string> = {
+  rocket: `<svg ${svgAttrs}><path d="M12 15v5s3.03-.55 4-2c1.08-1.62 0-5 0-5"/><path d="M4.5 16.5c-1.5 1.26-2 5-2 5s3.74-.5 5-2c.71-.84.7-2.13-.09-2.91a2.18 2.18 0 0 0-2.91-.09"/><path d="M9 12a22 22 0 0 1 2-3.95A12.88 12.88 0 0 1 22 2c0 2.72-.78 7.5-6 11a22.4 22.4 0 0 1-4 2z"/><path d="M9 12H4s.55-3.03 2-4c1.62-1.08 5 .05 5 .05"/></svg>`,
+  "circle-play": `<svg ${svgAttrs}><path d="M9 9.003a1 1 0 0 1 1.517-.859l4.997 2.997a1 1 0 0 1 0 1.718l-4.997 2.997A1 1 0 0 1 9 14.996z"/><circle cx="12" cy="12" r="10"/></svg>`,
+  users: `<svg ${svgAttrs}><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><path d="M16 3.128a4 4 0 0 1 0 7.744"/><path d="M22 21v-2a4 4 0 0 0-3-3.87"/><circle cx="9" cy="7" r="4"/></svg>`,
+  plug: `<svg ${svgAttrs}><path d="M12 22v-5"/><path d="M15 8V2"/><path d="M17 8a1 1 0 0 1 1 1v4a4 4 0 0 1-4 4h-4a4 4 0 0 1-4-4V9a1 1 0 0 1 1-1z"/><path d="M9 8V2"/></svg>`,
+  camera: `<svg ${svgAttrs}><path d="M13.997 4a2 2 0 0 1 1.76 1.05l.486.9A2 2 0 0 0 18.003 7H20a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V9a2 2 0 0 1 2-2h1.997a2 2 0 0 0 1.759-1.048l.489-.904A2 2 0 0 1 10.004 4z"/><circle cx="12" cy="13" r="3"/></svg>`,
+  palette: `<svg ${svgAttrs}><path d="M12 22a1 1 0 0 1 0-20 10 9 0 0 1 10 9 5 5 0 0 1-5 5h-2.25a1.75 1.75 0 0 0-1.4 2.8l.3.4a1.75 1.75 0 0 1-1.4 2.8z"/><circle cx="13.5" cy="6.5" r=".5" fill="currentColor"/><circle cx="17.5" cy="10.5" r=".5" fill="currentColor"/><circle cx="6.5" cy="12.5" r=".5" fill="currentColor"/><circle cx="8.5" cy="7.5" r=".5" fill="currentColor"/></svg>`,
+  zap: `<svg ${svgAttrs}><path d="M4 14a1 1 0 0 1-.78-1.63l9.9-10.2a.5.5 0 0 1 .86.46l-1.92 6.02A1 1 0 0 0 13 10h7a1 1 0 0 1 .78 1.63l-9.9 10.2a.5.5 0 0 1-.86-.46l1.92-6.02A1 1 0 0 0 11 14z"/></svg>`,
+  accessibility: `<svg ${svgAttrs}><circle cx="16" cy="4" r="1"/><path d="m18 19 1-7-6 1"/><path d="m5 8 3-3 5.5 3-2.36 3.5"/><path d="M4.24 14.5a5 5 0 0 0 6.88 6"/><path d="M13.76 17.5a5 5 0 0 0-6.88-6"/></svg>`,
+  settings: `<svg ${svgAttrs}><path d="M9.671 4.136a2.34 2.34 0 0 1 4.659 0 2.34 2.34 0 0 0 3.319 1.915 2.34 2.34 0 0 1 2.33 4.033 2.34 2.34 0 0 0 0 3.831 2.34 2.34 0 0 1-2.33 4.033 2.34 2.34 0 0 0-3.319 1.915 2.34 2.34 0 0 1-4.659 0 2.34 2.34 0 0 0-3.32-1.915 2.34 2.34 0 0 1-2.33-4.033 2.34 2.34 0 0 0 0-3.831A2.34 2.34 0 0 1 6.35 6.051a2.34 2.34 0 0 0 3.319-1.915"/><circle cx="12" cy="12" r="3"/></svg>`,
+  "monitor-play": `<svg ${svgAttrs}><path d="M15.033 9.44a.647.647 0 0 1 0 1.12l-4.065 2.352a.645.645 0 0 1-.968-.56V7.648a.645.645 0 0 1 .967-.56z"/><path d="M12 17v4"/><path d="M8 21h8"/><rect x="2" y="3" width="20" height="14" rx="2"/></svg>`,
+  "circle-help": `<svg ${svgAttrs}><circle cx="12" cy="12" r="10"/><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"/><path d="M12 17h.01"/></svg>`,
+  "message-circle": `<svg ${svgAttrs}><path d="M2.992 16.342a2 2 0 0 1 .094 1.167l-1.065 3.29a1 1 0 0 0 1.236 1.168l3.413-.998a2 2 0 0 1 1.099.092 10 10 0 1 0-4.777-4.719"/></svg>`,
+};
+---
+
+<Fragment set:html={icons[name] || ""} />

docs/src/components/starlight/FeatureCard.astro

@@ -1,4 +1,6 @@
 ---
+import CardIcon from "./CardIcon.astro";
+
 interface Link {
   label: string;
   href: string;
@@ -17,7 +19,13 @@ const { title, description, href, icon, links } = Astro.props;
 
 <div class="feature-card">
   <a href={href} class="card-main-link">
-    {icon && <span class="card-icon">{icon}</span>}
+    {
+      icon && (
+        <span class="card-icon">
+          <CardIcon name={icon} />
+        </span>
+      )
+    }
     <h3 class="card-title">{title}</h3>
     <p class="card-description">{description}</p>
   </a>
@@ -72,9 +80,16 @@ const { title, description, href, icon, links } = Astro.props;
   }
 
   .card-icon {
-    font-size: 2rem;
     display: block;
+    width: 2rem;
+    height: 2rem;
     margin-bottom: 0.75rem;
+    color: var(--sl-color-text-accent);
+  }
+
+  .card-icon :global(svg) {
+    width: 100%;
+    height: 100%;
   }
 
   .card-title {

docs/src/content/docs/docs/features/capturing/recordings.md

@@ -58,7 +58,7 @@ Make sure you don’t have any audio routing enabled. Doing so will confuse Rock
 
 ### Does RocketSim install a custom audio driver for audio recording?
 
-No, there’s nothing you need to install for audio recording to work. 🎉
+No, there’s nothing you need to install for audio recording to work.
 
 ### Why are my iPad recordings upside-down?
 

docs/src/content/docs/docs/features/capturing/simulator-camera-support.md

@@ -5,7 +5,7 @@ description: "Beta of testing the camera on the Simulator"
 
 A top requested feature has always been Simulator camera support. Constantly having to test the camera on an actual device can be a pain and it’s annoying to run into dead ends on the Simulator for apps that come with camera features.
 
-We hear you and we’re excited to share the early beta of RocketSim Camera Simulation 📸
+We hear you and we’re excited to share the early beta of RocketSim Camera Simulation.
 
 Check out these demo’s:
 

docs/src/content/docs/docs/index.mdx

@@ -33,19 +33,19 @@ Get up and running with RocketSim in minutes.
     title="First Steps"
     description="Set up permissions and configure App Actions to start using RocketSim"
     href="/docs/getting-started/onboarding"
-    icon="🚀"
+    icon="rocket"
   />
   <FeatureCard
     title="Product Tour"
     description="Watch quick demos and explore all of RocketSim's features"
     href="/docs/getting-started/product-tour-and-quick-demos"
-    icon="🎥"
+    icon="circle-play"
   />
   <FeatureCard
     title="Team Usage"
     description="Learn how large teams leverage RocketSim to boost productivity"
     href="/docs/getting-started/how-large-teams-use-rocketsim"
-    icon="👥"
+    icon="users"
   />
 </FeatureGrid>
 
@@ -58,7 +58,7 @@ Explore RocketSim's powerful suite of tools for iOS development.
     title="RocketSim Connect"
     description="Monitor network traffic and debug API calls in real-time with an intuitive interface"
     href="/docs/features/rocketsim-connect/introduction-and-setup"
-    icon="🔌"
+    icon="plug"
     links={[
       {
         label: "Setup Guide",
@@ -74,7 +74,7 @@ Explore RocketSim's powerful suite of tools for iOS development.
     title="Professional Captures"
     description="Create App Store-ready screenshots with device bezels and high-quality video recordings"
     href="/docs/features/capturing/screenshots"
-    icon="📸"
+    icon="camera"
     links={[
       { label: "Screenshots", href: "/docs/features/capturing/screenshots" },
       { label: "Recordings", href: "/docs/features/capturing/recordings" },
@@ -84,7 +84,7 @@ Explore RocketSim's powerful suite of tools for iOS development.
     title="Design Comparison"
     description="Achieve pixel-perfect designs with overlays, grids, rulers, and magnifier tools"
     href="/docs/features/design-comparison/comparing-designs"
-    icon="🎨"
+    icon="palette"
     links={[
       {
         label: "Compare Designs",
@@ -100,7 +100,7 @@ Explore RocketSim's powerful suite of tools for iOS development.
     title="App Actions"
     description="Test push notifications, deep links, location simulation, and network conditions"
     href="/docs/features/app-actions/general-app-actions"
-    icon="⚡"
+    icon="zap"
     links={[
       {
         label: "Push Notifications",
@@ -116,13 +116,13 @@ Explore RocketSim's powerful suite of tools for iOS development.
     title="Accessibility"
     description="Test your app with Dynamic Type and accessibility feature toggles"
     href="/docs/features/accessibility/toggles-and-dynamic-text"
-    icon="♿"
+    icon="accessibility"
   />
   <FeatureCard
     title="Appearance"
     description="Customize RocketSim's side window, shortcuts, and interface settings"
     href="/docs/appearance/side-window"
-    icon="⚙️"
+    icon="settings"
     links={[
       { label: "Side Window", href: "/docs/appearance/side-window" },
       { label: "Shortcuts", href: "/docs/appearance/shortcuts" },
@@ -139,19 +139,19 @@ Additional resources to help you make the most of RocketSim.
     title="Video Tutorials"
     description="Browse our YouTube channel for comprehensive video guides and feature showcases"
     href="https://www.youtube.com/@rocketsimapp"
-    icon="📺"
+    icon="monitor-play"
   />
   <FeatureCard
     title="FAQ"
     description="Find answers to frequently asked questions and common troubleshooting tips"
     href="/docs/support/faq"
-    icon="❓"
+    icon="circle-help"
   />
   <FeatureCard
     title="Support"
     description="Report issues or request new features to help improve RocketSim"
     href="/docs/support/reporting-an-issue"
-    icon="💬"
+    icon="message-circle"
     links={[
       { label: "Report an Issue", href: "/docs/support/reporting-an-issue" },
       {