SVG图标实现主题皮肤切换

通过添加class以及修改css变量得方式实现一个svg图标切换不同得主题色

1.在变量文件中定义几组控制几种不同颜色得变量

分析提供的图标发现有三种颜色，因此定义三个css变量

//控制导航双色图标得颜色
//第一颜色
@svg-color-first-color: #356ffb;
//第二颜色
@svg-color-second-color: #fff;
//第三颜色
@svg-color-third-color: #61cffb;

2.在样式文件（app.less）中定义几组 class

分析图标发现svg中存在三种不同的属性 fill（填充色） ，stop-color（渐变）， stroke（描边色） 均可设置颜色，因此定义几组class

//用于控制菜单导航得一系列双色图标得颜色（以下类名需要加到svg中）

.svg-color-first-fill {
  fill: @svg-color-first-color;
}
.svg-color-second-fill {
  fill: @svg-color-second-color;
}
.svg-color-third-fill {
  fill: @svg-color-third-color;
}
.svg-color-first-stop-color {
  stop-color: @svg-color-first-color;
}
.svg-color-second-stop-color {
  stop-color: @svg-color-second-color;
}
.svg-color-third-stop-color {
  stop-color: @svg-color-third-color;
}
.svg-color-first-stroke {
  stroke: @svg-color-first-color;
}
.svg-color-second-stroke {
  stroke: @svg-color-second-color;
}
.svg-color-third-stroke {
  stroke: @svg-color-third-color;
}

3.将对应的class写到svg文件中

<?xml version="1.0" encoding="UTF-8"?>
<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink">
  <title>icon_侧边_16px_消息中心</title>
  <defs>
    <linearGradient x1="100%" y1="46.875%" x2="1.11022302e-14%" y2="53.125%" id="linearGradient-1">
      <stop class="svg-color-first-stop-color" stop-color="#F55448" offset="0.0799005682%"></stop>
      <stop class="svg-color-third-stop-color" stop-color="#FF8076" stop-opacity="0.555780157" offset="100%"></stop>
    </linearGradient>
  </defs>
  <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
    <g id="导航菜单-Menu" transform="translate(-128.000000, -1027.000000)">
      <g id="编组-26" transform="translate(68.000000, 413.000000)">
        <g id="编组-19备份-6" transform="translate(40.000000, 598.000000)">
          <g id="icon/侧边/16px/消息中心" transform="translate(20.000000, 16.000000)">
            <rect id="矩形" x="0" y="0" width="16" height="16"></rect>
            <path
              d="M11.8538537,0.5 C12.2106511,0.5 12.5,0.798477534 12.5,1.16666233 C12.5,3.08782921 12.5,4.31005363 12.5,4.83333557 C12.5,5.1559741 12.5,5.60040786 12.5,6.16663684 L13.5,7.5 L12.5,8.83337573 C12.5,9.39960841 12.5,9.84404477 12.5,10.1666848 C12.5,10.6899676 12.5,11.9121917 12.5,13.8333572 C12.5,14.201542 12.2106511,14.5 11.8538537,14.5 L3.14614627,14.5 C2.78927317,14.5 2.5,14.201542 2.5,13.8333572 L2.5,1.16666233 C2.5,0.798458003 2.78927317,0.5 3.14614627,0.5 L11.8538537,0.5 Z"
              id="路径备份" class="svg-color-second-stroke" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round"
              stroke-linejoin="round"
              transform="translate(8.000000, 7.500000) rotate(90.000000) translate(-8.000000, -7.500000) "></path>
            <path
              d="M5,6 L11,6 C11.5522847,6 12,6.44771525 12,7 C12,7.55228475 11.5522847,8 11,8 L5,8 C4.44771525,8 4,7.55228475 4,7 C4,6.44771525 4.44771525,6 5,6 Z"
              id="矩形备份-4" fill="url(#linearGradient-1)"></path>
          </g>
        </g>
      </g>
    </g>
  </g>
</svg>

效果