Change color SVG on native menu bar

0
Hi all, I am styling the menu bar in the native app in Mendix 8.10.0 and try to color the svg image/icon of the items when they are selected. I looked at the Native Mobile Styling Guide (https://docs.mendix.com/refguide/native-styling-refguide) and you can adjust the selceted icon but how do I change the color of an svg in native? Or how can I upload images in this code so I can upload the icon images here and change the color of the images myself? My custom code for the menu bar is now:  import { brand, contrast, darkMode } from "./custom-variables"; import { Border } from "./Border"; const backgroundColor = darkMode ? "#000" : "#FFF"; export const navigationStyle = { progressOverlay: { background: { backgroundColor: "#fff" }, text: { color: brand.text } }, bottomBar: { container: { backgroundColor: backgroundColor, borderTopWidth: 0, ...Border.container }, label: { fontSize: 12 }, icon: { ??? }, selectedIcon: { ??? } }, }   Thanks! Kolien
asked
2 answers
2

I had an issue with this as well so I sumbitted a support ticket with Mendix. The following solution works in our project:

“If you make sure the SVG doesn't have a color hardcoded inside it, it should be able to take the same color as a glyphicon.”

Thus, if you have an SVG without a color hardcoded (which you should be able to do in a editing program), and you put it for example as an SVG in your bottom navigation, you can alter the color of the icon or the selectedIcon:

export const navigationStyle = {

    bottomBar: {

        label: {

            color: brand.appDesignInactive,

        },

        selectedLabel: {

            color: brand.primary,

        },

        icon: {

            color: brand.appDesignInactive,

        },

        selectedIcon: {

            color: brand.primary,

        },

    },

}

 

Hope this helps you. 

answered
0

Kolien any update on SVG coloring in native apps?

answered