Eleventy Plugin Font Awesome

Overview:

The @11ty/font-awesome package brings a powerful and streamlined approach to incorporating Font Awesome icons into your Eleventy templates. With optimized per-page tree-shaken SVG spritesheets, it dramatically enhances the workflow for developers looking to leverage the extensive library of icons provided by Font Awesome. This is especially useful for projects where performance and customization are paramount, allowing integration without bloating the page with unnecessary code.

Designed for use with Eleventy v3.0.1-alpha.4 or newer, this tool is already in production use on notable sites like 11ty.dev and zachleat.com. Whether you're using HTML or Markdown, the ability to easily include over 2000 icons, including both free and Pro sets, makes it a versatile choice for any Eleventy project.

Features:

• Per-Page SVG Spritesheets: Generates optimized icon spritesheets for each page, ensuring only the necessary SVGs are included.
• HTML Driven: Easily copy and paste HTML directly from the Font Awesome documentation into your templates without hassle.
• No Extra CSS or JavaScript: This solution focuses solely on SVG icons, keeping your site lightweight and fast.
• De-duplication: Automatically detects and excludes duplicate icons, minimizing redundancy in your SVG code.
• Extensive Icon Library: Access to over 2000 icons from Font Awesome, including Solid, Regular, and Brand icons for versatile design.
• Pro Options Available: Optional integration with Font Awesome Pro sets for an even richer icon experience.
• Graceful Fallbacks: Works seamlessly with existing Font Awesome JavaScript to ensure icons appear correctly even if some are not included in your plugin bundle.
• Flexible Shortcode Usage: Introduces a {% icon %} shortcode for easy implementation across templates, streamlining your icon management.