SwiftUI toolbar image change with out popping

I would like my toolbar merchandise to develop into badged when it is energetic. I believed the very best trying means to do that can be with a customized SF Image as a result of that matches the remainder of my app.

However apparently .toolbar labels ignore your image’s textual content guides? As a result of they give the impression of being excellent once I export, however once I swap symbols, they pop up and down:

.toolbar {
    ToolbarItem(placement: .topBarTrailing) {
        Button {
            isFilterSheetPresented = true
        } label: {
            Picture(
                systemName: activeFilterCount == 0 ? "tray" : "tray.badge"
            )
//          .contentTransition(.symbolEffect(.exchange))
            .symbolRenderingMode(activeFilterCount > 0 ? .palette: .none)
            .foregroundStyle(
                activeFilterCount > 0 ? Shade.accentColor : Shade.main,
                Shade.main
            )
            }
            .accessibilityLabel("Filter")
        }
}

In my app, I am utilizing customized symbols:

activeFilterCount==0 ? "customized.line.3.horizontal.lower" : "customized.line.3.horizontal.lower.badge"

however tray.badge behaves the identical means and it is not customized – the badge makes the image taller, so the underlying image pops down when it is badged.

I’ve disabled the .contentTransition as a result of that 1. simply makes it fade out and in up and down quite than pop, and a couple of. results in different hilarity as all the opposite attributes change at random intervals.

Each AI device means that I wrap it in a body, however that solely prevents my icon altering dimension from bothering the opposite components of the toolbar. I would like my image to be laid out in accordance with its textual content guides, not it is bounding field, and the body would not repair that in any respect.

If there is no such thing as a "appropriate" reply, I could make it principally work with customized

.offset(y: activeFilterCount > 0 ? -3.5 : 0)

And eyeballing an offset at each textual content dimension, however that appears deeply silly.

I want there was a means to make use of .alignmentGuide() and/or .firstTextBaseline to really lock it down, however I do not suppose these work in toolbars. And I do not suppose there is a option to stick an HStack in there that will not pop round all the identical.

I am additionally pushing alongside making an attempt to make it work with .badge() however that is not going to be the best look.