Avatar accessory image changed to accommodate multiple rendering modes

[sophialee0416]

Platforms Impacted

• iOS
• macOS

Description of changes

In some scenarios, the activity image will not show even if the cutout is made within the Avatar if the image file is an SVG and the asset image is rendered as a Template Image. Added an SVG example in the demo controller and included hard-coded foreground color that will later be exposed as a token in a follow-up PR to unblock downstream dependencies.

Verification

Before	After

Pull request checklist

This PR has considered:

• Light and Dark appearances
• iOS supported versions (all major versions greater than or equal current target deployment version)
• VoiceOver and Keyboard Accessibility
• Internationalization and Right to Left layouts
• Different resolutions (1x, 2x, 3x)
• Size classes and window sizes (iPhone vs iPad, notched devices, multitasking, different window sizes, etc)
• iPad Pointer interaction
• SwiftUI consumption (validation or new demo scenarios needed)
• Objective-C exposure (provide it only if needed)

Microsoft Reviewers: Open in CodeFlow

[harrieshin]

"Note: The images are showing but are currently not the correct color. This will come in a later PR." even if we aren't introducing the public token right away for .12 patch, we can still define the static constant value?

[harrieshin]

2 comments

[sophialee0416]

"Note: The images are showing but are currently not the correct color. This will come in a later PR." even if we aren't introducing the public token right away for .12 patch, we can still define the static constant value?

Seems like SwiftUI won't allow images to take on custom foreground colors, which I can't include in this change because that would mean exposing a new API (mentioned in thread above)

ETA: No new API should be needed after an offline conversation

[harrieshin]

please update PR description screenshots? i think darkmode bug should be fixed