SwiftUI toolbar image change with out popping

I would like my toolbar merchandise to grow to be badged when it is lively. I believed the most effective wanting manner to do that could 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 appear 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(.substitute))
            .symbolRenderingMode(activeFilterCount > 0 ? .palette: .none)
            .foregroundStyle(
                activeFilterCount > 0 ? Shade.accentColor : Shade.major,
                Shade.major
            )
            }
            .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 manner 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 fairly than pop, and a pair of. results in different hilarity as all the opposite attributes change at random intervals.

Each AI software means that I wrap it in a body, however that solely prevents my icon altering dimension from bothering the opposite elements of the toolbar. I need my image to be laid out in response to 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 largely 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 manner to make use of .alignmentGuide() and/or .firstTextBaseline to really lock it down, however I do not assume these work in toolbars. And I do not assume there is a strategy 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.