Lucide Icon Integration Test
This page tests all shortcode types with both Lucide and Font Awesome icons to verify the hybrid icon system works correctly.
1. Navigation Cards (auto-generated from child pages)
These cards pull icons from child page frontmatter. Child pages use lucide- prefix icons.
2. Navigation Mini Cards
Same child pages rendered as compact mini cards.
3. Explicit Cards — Lucide Icons
Lucide Compass
Testing Lucide compass icon in a standard card shortcode. Should render as a stroke-based SVG via CSS mask-image.
Lucide Crown
Testing Lucide crown icon. Should inherit text-text-dark color from the CSS class.
4. Explicit Cards — Font Awesome (backward compatibility)
FA Compass
Font Awesome compass icon should still render correctly as an icon font glyph.
FA Crown
Font Awesome crown icon for side-by-side comparison with Lucide version above.
5. Three-Column Cards — Lucide Icons
Target
Evidence-based decisions guided by real feedback loops and measurable outcomes.
Workflow
Lightweight structures for arenas, teams, and accountability — clarity without bureaucracy.
Collaboration
Small, focused cohorts with interactive design sessions and direct application.
6. Feature Shortcodes — Lucide Icons
Strategic Compass
Lucide icon rendered at feature size (180px / 225px) with drop-shadow effect.
- Should scale cleanly as an SVG
- Should inherit the primary color via CSS
- Drop shadow should apply correctly
Gray Transparent Style
Testing the gray-transparent style variant with a Lucide icon.
- Icon should appear in gray (#808080)
- Opacity should be 90%
- Drop shadow still applies
7. Feature Shortcodes — Font Awesome (comparison)
FA Feature Icon
Font Awesome icon at feature size for comparison with the Lucide version above.
- Font-based rendering at 180px/225px
- Same primary color and shadow
- Visual weight comparison
8. Mixed Cards — Side by Side
Lucide Lightbulb
Lucide stroke-based lightbulb icon.
FA Lightbulb
Font Awesome solid lightbulb icon.