I'm working with AppStudio. Is there a way to change SVG colors without changing the svg file or adding an overlay?
Yes, but, it depends on the QML component you use.
Some QML components implement an `icon` which can be used to scale (with resampling) and recolor SVGs, e.g.
property url bikingSvg: "https://raw.githubusercontent.com/Esri/calcite-ui-icons/master/icons/biking-32.svg"
ItemDelegate {
icon.source: bikingSvg
icon.color: "blue"
icon.width: 32
icon.height: 32
text: qsTr( "ItemDelegate" )
}
You may find it useful to use the icon property in common components such as Button, ToolButton, MenuItem, e.g.
Button {
icon.source: bikingSvg
icon.color: "blue"
icon.width: 32
icon.height: 32
text: qsTr( "Button" )
}
However, if you use Image, and you will need to take care of resampling and coloring yourself. Resampling is needed with the sourceSize property and coloring needs to be done by the ColorOverlay property. Using the Image object in this way allows you to do layering with different colors for different layers
property url bikingSvg: "https://raw.githubusercontent.com/Esri/calcite-ui-icons/master/icons/biking-32.svg"
property url disallowSvg: "https://raw.githubusercontent.com/Esri/calcite-ui-icons/master/icons/circle-disallowed-32.svg"
Item {
width: 32
height: 32
Image {
id: bikingImage
anchors.fill: parent
source: bikingSvg
sourceSize: Qt.size( width, height )
}
ColorOverlay {
color: "blue"
anchors.fill: bikingImage
source: bikingImage
}
Image {
id: disallowImage
anchors.fill: parent
source: disallowSvg
sourceSize: Qt.size( width, height )
}
ColorOverlay {
color: "red"
anchors.fill: disallowImage
source: disallowImage
}
}