Add new Icon parameter to BitBadge component (#12134)

[msynk]

closes #12134

Summary by CodeRabbit

• New Features

  • Added support for external icon libraries in the Badge component through a new Icon parameter, allowing integration with FontAwesome, Bootstrap Icons, and other external libraries.

• Style

  • Improved visual spacing within badge containers for better layout consistency.

• Documentation

  • Added examples demonstrating integration with external icon libraries and Icon parameter usage.

[coderabbitai]

Walkthrough

This change adds external icon support to the BitBadge component by introducing a new Icon parameter of type BitIconInfo?, allowing usage of external icon libraries in addition to built-in Fluent UI icons. Includes styling adjustments, comprehensive documentation, and demo examples.

Changes

Cohort / File(s)	Summary
BitBadge Component Implementation src/BlazorUI/Bit.BlazorUI/Components/Notifications/Badge/BitBadge.razor, src/BlazorUI/Bit.BlazorUI/Components/Notifications/Badge/BitBadge.razor.cs	Added public Icon parameter of type BitIconInfo? with XML documentation. Modified icon rendering logic to use BitIconInfo resolution instead of direct IconName.HasValue() check. Removed BOM character from namespace directive.
BitBadge Styling src/BlazorUI/Bit.BlazorUI/Components/Notifications/Badge/BitBadge.scss	Added gap: spacing(0.5) to .bit-bdg-ctn rule for horizontal spacing between inline-flex children. Removed BOM character from import directive.
BitBadge Documentation & Examples src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Notifications/Badge/BitBadgeDemo.razor, src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Notifications/Badge/BitBadgeDemo.razor.cs	Added demo examples showcasing external icon library usage (FontAwesome, Bootstrap Icons) with BitIconInfo parameter. Reorganized example sections with new "External Icons" example. Updated code example references and added detailed documentation for icon configuration (Name, BaseClass, Prefix). Removed BOM character from page directive.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Poem

🐰 A badge with icons shiny and bright,
Now wears external colors just right,
FontAwesome, Bootstrap, all welcome now,
BitIconInfo shows us the way, and how!
Fashion and function in perfect unite. ✨

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately and concisely summarizes the main change: adding a new Icon parameter to the BitBadge component.
Linked Issues check	✅ Passed	The pull request successfully implements the new Icon parameter on BitBadge to enable external icon support, directly addressing issue #12134's objective.
Out of Scope Changes check	✅ Passed	All changes are scoped to BitBadge component: added Icon parameter, updated documentation, added demo examples, and fixed BOM characters. No unrelated modifications detected.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@src/BlazorUI/Bit.BlazorUI/Components/Notifications/Badge/BitBadge.scss`:
- Line 1: The SCSS import in BitBadge.scss currently includes the .scss
extension which triggers stylelint's scss/load-partial-extension rule; update
the import statement in BitBadge.scss (the `@import`
"../../../Styles/functions.scss"; line) to remove the .scss extension so it
imports the partial as `@import` "../../../Styles/functions"; ensuring consistency
with SCSS partial conventions and newer Sass behavior.

---

ℹ️ Review info

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro

Knowledge base: Disabled due to Reviews -> Disable Knowledge Base setting

📥 Commits

Reviewing files that changed from the base of the PR and between 2e30915 and a7161ba.

📒 Files selected for processing (5)

• src/BlazorUI/Bit.BlazorUI/Components/Notifications/Badge/BitBadge.razor
• src/BlazorUI/Bit.BlazorUI/Components/Notifications/Badge/BitBadge.razor.cs
• src/BlazorUI/Bit.BlazorUI/Components/Notifications/Badge/BitBadge.scss
• src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Notifications/Badge/BitBadgeDemo.razor
• src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Notifications/Badge/BitBadgeDemo.razor.cs