SVG Two-Color Branding

Support icons with multiple branding colors

by _sir

HTML

<div id="wrapper">
  <div class="iconDiv-0-2-1190"><span class="root-0-2-1227 iconRoot-0-2-1191">
      <div class="iconWrapper-0-2-1231 icon-0-2-1228 icon-0-2-1188"><svg viewBox="0 0 16 16" class="icon-chart-line
      icon-0-2-1230 icon-d23-0-2-1255">
          <title></title>
          <path d="M2.8 13.5H3c.2 0 .4-.1.5-.3l2.4-5.5 3.9 1.8c.2.1.5 0 .6-.2L13.8 3l.1 1.6c0 .3.2.5.5.5s.5-.2.5-.5L14.7 2c0-.3-.2-.5-.4-.7-.3-.1-.5-.1-.8 0l-2.4 1.1c-.2.1-.3.4-.2.7.1.2.4.3.7.2l1.2-.6-3 5.6-4-1.8c-.1-.1-.3-.1-.4 0s-.2.2-.2.3l-2.6 6c-.2.3 0 .5.2.7zM15.5 15H1V.5C1 .2.8 0 .5 0S0 .2 0 .5V16h15.5c.3 0 .5-.2.5-.5s-.2-.5-.5-.5z"></path>
          <path d="M2.8 13.5H3c.2 0 .4-.1.5-.3l2.4-5.5 3.9 1.8c.2.1.5 0 .6-.2L13.8 3l.1 1.6c0 .3.2.5.5.5s.5-.2.5-.5L14.7 2c0-.3-.2-.5-.4-.7-.3-.1-.5-.1-.8 0l-2.4 1.1c-.2.1-.3.4-.2.7.1.2.4.3.7.2l1.2-.6-3 5.6-4-1.8c-.1-.1-.3-.1-.4 0s-.2.2-.2.3l-2.6 6c-.2.3 0 .5.2.7z" class="secondColor"></path>
        </svg></div>
      <div class="name-0-2-1229">ChartLineAshIcon</div>
    </span></div>
  <div class="iconDiv-0-2-1190"><span class="root-0-2-1227 iconRoot-0-2-1191">
      <div class="iconWrapper-0-2-1231 icon-0-2-1228 icon-0-2-1188"><svg viewBox="0 0 16 16" class="icon-document
      icon-0-2-1230 icon-d54-0-2-1286">
          <title></title>
          <path d="M10 9H3c-.3 0-.5.2-.5.5s.2.5.5.5h7c.3 0 .5-.2.5-.5S10.3 9 10 9zm0-2H3c-.3 0-.5.2-.5.5s.2.5.5.5h7c.3 0 .5-.2.5-.5S10.3 7 10 7zm0-2H3c-.3 0-.5.2-.5.5s.2.5.5.5h7c.3 0 .5-.2.5-.5S10.3 5 10 5zm2.1-1.4L8.9.3C8.6.1 8.3 0 8 0H1C.7 0 .5.2.5.5v15c0 .3.2.5.5.5h11c.3 0 .5-.2.5-.5v-11c0-.3-.1-.6-.4-.9zM11.5 15h-10V1H8l.2.1 3.3 3.3s.1.1.1.2L11.5 15z"></path>
          <path class="secondColor" d="M 10 9 H 3 c -0.3 0 -0.5 0.2 -0.5 0.5 s 0.2 0.5 0.5 0.5 h 7 c 0.3 0 0.5 -0.2 0.5 -0.5 S 10.3 9 10 9 z m 0 -2 H 3 c -0.3 0 -0.5 0.2 -0.5 0.5 s 0.2 0.5 0.5 0.5 h 7 c 0.3 0 0.5 -0.2 0.5 -0.5 S 10.3 7 10 7 z m 0 -2 H 3 c -0.3 0 -0.5 0.2 -0.5 0.5 s 0.2 0.5 0.5 0.5 h 7 c 0.3 0 0.5 -0.2 0.5 -0.5 S 10.3 5 10 5 z...

CSS

.iconDiv-0-2-1190 {
  width: 150px;
  display: inline-block;
}

.iconRoot-0-2-1191 {
  width: 110px;
  padding: 15px;
  margin: 0 auto;
  text-align: center;
  display: inline-block;
}

.name-0-2-1229 {
  font-family: helvetica, arial;
  font-size: 12px;
  margin-top: 10px;
}

svg {
  width: 80px;
  height: 80px;
  fill: rgb(0,112,185);
}

.branded .secondColor {
  fill: #009900;
}

button {
  display: block;
  clear: both;
  margin: 2em auto;
  padding: 1em;
  font-size: 20px;
  border: 2px solid rgb(0, 112, 185);;
  border-radius: 10px;
  background: white;
}

.branded button {
  border-color: #009900;
}

JavaScript

document.getElementById('toggle').addEventListener('click', () => {
	document.getElementById('wrapper').classList.toggle('branded');
});