Modify SVG color without using CSS or modifying SVG file

Question

Does anyone have any tip/knowledge on changing the color/properties of a svgicon without using CSS or directly modifying the file?

For example:

const style = {
  somestyle: {
    random style configs
  }
}

<svgIcon className={somestyle} />

Is it even possible to change that svgIcon into a different color from it's default color without using CSS or directly modifying the file?

Or maybe it would be easier to use and modify svgs provided by matieral-ui?

what exactly are we allowed to do? – Robert Longson Jul 25 '18 at 21:41 — Robert Longson, Jul 25 '18 at 21:41
https://stackoverflow.com/a/9873285/6385459 – Dennis Jul 25 '18 at 21:41 — Dennis, Jul 25 '18 at 21:41
@RobertLongson trying to turn CSS into JSS – nuji Jul 25 '18 at 21:48 — nuji, Jul 25 '18 at 21:48

score 1 · Answer 1 · answered Jul 25 '18 at 21:41

You can use javascript to modify the style of the respective SVG elements.

<html>
<head>
    <script>
      function setColor(color)
      {
        document.getElementById("rect").style.fill = color;
      }
    </script>
</head>
<body>
  <svg xmlns="http://www.w3.org/2000/svg" version="1.1" style="width: 300px; height: 250px">
    <rect x="50" y="20" rx="10" ry="10" width="200" height="200" style="fill:red; stroke:black; stroke-width:3" id="rect" />
</svg>

  <button onclick="setColor('red');">Red</button>
  <button onclick="setColor('green');">Green</button>
  <button onclick="setColor('blue');">Blue</button>
</body>
</html>

http://jsfiddle.net/VDzGG/

So I would have to have the svg on the same page where it is being modified to be able to modify its color? Say if I was importing the svg from a library within, the color changes would probably not affect it right? — nuji, Jul 25 '18 at 22:08

Modify SVG color without using CSS or modifying SVG file

1 Answers1