移动鼠标（动态）改变svg图标的颜色

一共三个步骤：

1. 删除svg中的颜色属性；
2. 在页面引入时给予一个初始颜色；
3. 在css中设置变动后的颜色；

一、在阿里巴巴矢量图中下载svg格式的图片，然后直接拖动到自己的项目中，保存，然后查看svg代码,然后把设置颜色的 fill元素 删除。

goBack-icon.svg

<svg
  t="1616980614484"
  class="icon"
  viewBox="0 0 1024 1024"
  version="1.1"
  xmlns="http://www.w3.org/2000/svg"
  p-id="1124"
  xmlns:xlink="http://www.w3.org/1999/xlink"
  width="400"
  height="400"
><defs><style type="text/css" /></defs><path
    d="M129.465 495.738c-11.408 11.408-11.408 29.855 0 41.142l351.952 351.952c11.408 11.408 29.855 11.408 41.142 0 5.703-5.703 8.496-13.107 8.496-20.631s-2.791-14.928-8.496-20.631l-302.194-302.194h650.627c16.142 0 29.127-12.986 29.127-29.127s-12.986-29.127-29.127-29.127h-650.627l302.194-302.194c5.703-5.703 8.496-13.107 8.496-20.631s-2.791-14.928-8.496-20.631c-11.408-11.408-29.855-11.408-41.142 0l-351.952 352.074z"
    fill="#515151"  //这个删除哦
    p-id="1125"
  /></svg>

二，在页面中引用svg,然后设置一个初始颜色

 <div>
      <svg-icon
        icon-class="goBack-icon"
        style="width:30px;height:30px;color:#615e5e;" 
      />
    </div>

三，鼠标在的时候，图标改变颜色，在css中设置

svg:hover {
  color: #067acc !important;
}