1

I have custom icon for zoom.

import zoomIcon from "common/assets/icons/zoom.svg";

    feature: {
      dataZoom: {
        yAxisIndex: "none",
        icon: {
          zoom: `${urlImgBase}${zoomIcon}`,
          back: `${urlImgBase}${resetIcon}`,
        },
        iconStyle: {
          color: "#91cc75", // doesn't work
        },
      },
    },

Inside svg I did -> stroke="currentColor". And it doesn't work. I have all time default black color.

How to change color my svg icon when I chosed "zoom"?

Dell Opp
  • 41
  • 6

1 Answers1

0

Yes, for a complete SVG file with stroke inside, styling won't work.
But it works for SVG path:

dataZoom: {
  icon: {
    zoom: 'path://M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zM6 4a1 1 0 0 0-1 1v6a1 1 0 0 0 2 0V5a1 1 0 0 0-1-1zm4 0a1 1 0 0 0-1 1v6a1 1 0 0 0 2 0V5a1 1 0 0 0-1-1z',
    back: 'path://M5 3a5 5 0 0 0 0 10h6a5 5 0 0 0 0-10H5zm6 9a4 4 0 1 1 0-8 4 4 0 0 1 0 8z'
  },
  iconStyle: {color: 'red', borderColor: 'blue'}
}

"change icon color after click" - that's much harder to do.

ned
  • 383
  • 2
  • 9