0

I have in ToggleButtonGroup five SVG icons rendered, 4 of them are highlighted once are selected as it should be, they have the same color as describing text. But 1 icon don't change, don't react once it's selected. It's about

<StyledSideNavigationWrapper>
            <StyledToggleButtonGroup
                color="warning"
                value={alignment}
                exclusive
                onChange={handleAlignment}
            >
                <StyledToggleButton
                    aria-label={TrainDetailsTranslation}
                    onClick={() => handleGoToDetails()}
                    value={`/trains/${idTrain}`}
                >
                    <StyledDetailsIcon />
                    <StyledText>{TrainDetailsTranslation}</StyledText>
                </StyledToggleButton>
                <StyledToggleButton
                    aria-label={LinesTranslation}
                    onClick={() => handleGoToLines()}
                    value={`/lines`}
                >
                    <StyledLinesIcon />
                    <StyledText>{LinesTranslation}</StyledText>
                </StyledToggleButton>
                <StyledToggleButton
                    aria-label={WheelsTranslation}
                    onClick={() => handleGoToWheels()}
                    value={`/trains/${idTrain}/wheels`}
                >
                    <StyledWheelIcon />
                    <StyledText>{WheelsTranslation}</StyledText>
                </StyledToggleButton>
                <StyledToggleButton
                    aria-label={ServiceTranslation}
                    onClick={() => handleGoToService()}
                    value={`/trains/${idTrain}/service`}
                >
                    <StyledServiceIcon />
                    <StyledText>{ServiceTranslation}</StyledText>
                </StyledToggleButton>
                <StyledToggleButton
                    aria-label={AlertsTranslation}
                    onClick={() => handleGoToAlerts()}
                    value={`/trains/${idTrain}/alerts`}
                >
                    <StyledErrorIcon />
                    <StyledText>{AlertsTranslation}</StyledText>
                </StyledToggleButton>
            </StyledToggleButtonGroup>
        </StyledSideNavigationWrapper>

Marked icon should be in orange color. enter image description here

I guess it's connected to SVG file. In one working icone code is like:

<svg width="21" height="20" viewBox="0 0 21 20" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path d="M12.28 13.3L18.28 19.3L20.39 17.14L14.39 11.14L12.28 13.3ZM16 8.1C15.61 8.1 15.19 8.05 14.86 7.91L3.46999 19.25L1.35999 17.14L8.76999 9.74L6.99999 7.96L6.27999 8.66L4.82999 7.25V10.11L4.12999 10.81L0.609985 7.25L1.30999 6.55H4.11999L2.71999 5.14L6.27999 1.58C6.55654 1.30195 6.88532 1.08131 7.24743 0.93075C7.60953 0.78019 7.99783 0.702682 8.38999 0.702682C8.78215 0.702682 9.17044 0.78019 9.53255 0.93075C9.89465 1.08131 10.2234 1.30195 10.5 1.58L8.38999 3.74L9.79999 5.14L9.08999 5.85L10.88 7.63L12.7 5.75C12.56 5.42 12.5 5 12.5 4.63C12.496 4.16832 12.5837 3.71045 12.7579 3.2829C12.9322 2.85535 13.1895 2.46662 13.515 2.13922C13.8406 1.81183 14.2278 1.55228 14.6544 1.37561C15.0809 1.19894 15.5383 1.10866 16 1.11C16.59 1.11 17.11 1.25 17.58 1.53L14.91 4.2L16.41 5.7L19.08 3.03C19.36 3.5 19.5 4 19.5 4.63C19.5 6.55 17.95 8.1 16 8.1Z" fill="currentColor"/>
</svg>

But one which is not working looks totally different. What should be changed there to make it work ?

<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<rect width="40" height="40" fill="url(#pattern0)"/>
<defs>
<pattern id="pattern0" patternContentUnits="objectBoundingBox" width="1" height="1">
<use xlink:href="#image0_4495_107104" transform="scale(0.00195312)"/>
</pattern>
<image id="image0_4495_107104" width="512" height="512" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAgAAAAIACAYAAAD0eNT6AAAABHNCSVQICAgIfAhkiAAAAAl

And here is very long code

Vk9uMQYN4uX4N7+d+df91BOg9f79e7XX6cDLwSt+GFUGz/Dwx76y6f1K6jAAAAAElFTkSuQmCC"/>
</defs>
</svg>

thanks a lot

marcinb1986
  • 308
  • 1
  • 10
  • 1
    The icon that doesn't seem to work contains an embedded (data-url based) pixel based png image – you won't be able apply a new color to it (you could do it via [css hue shift filters](https://stackoverflow.com/questions/22252472/how-to-change-the-color-of-an-svg-element)). But I'd rather recommend to swap this pseudo-svg (it's actually just a png embedded in svg) icon by a proper vector icon equivalent. – herrstrietzel Apr 25 '22 at 22:15

0 Answers0