修改SVG图标的颜色

svg图标里面的颜色不能用style样式直接修改，所以就需要修改path里面的颜色

步骤

1.修改掉原来的svg图标颜色

修改前

<?xml version="1.0" encoding="UTF-8"?>
<svg width="12px" height="12px" viewBox="0 0 12 12" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <title>icon_下跌</title>
    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g id="数据管理-普通表备份-10" transform="translate(-1042, -301)" fill-rule="nonzero">
            <g id="编组-6" transform="translate(524, 178)">
                <g id="编组备份-2" transform="translate(305, 30)">
                    <g id="icon_下跌" transform="translate(213, 93)">
                        <rect id="矩形" fill="#000000" opacity="0" x="0" y="0" width="11.9975155" height="12"></rect>
                        <path d="M11.4000942,9.206 C11.0687919,9.206 10.8002184,8.93737085 10.8002184,8.606 L10.8002184,7.052 L7.27294886,10.58 C7.03897484,10.8126342 6.66109804,10.8126342 6.42712402,10.58 L4.32156005,8.474 L1.02824204,11.768 C0.793017452,12.0032733 0.411643036,12.0032733 0.176418444,11.768 C-0.058806148,11.5327267 -0.058806148,11.1512733 0.176418444,10.916 L3.89564825,7.196 C4.12962227,6.96336584 4.50749907,6.96336584 4.74147309,7.196 L6.84703706,9.302 L9.94839481,6.2 L8.40071532,6.2 C8.06941307,6.2 7.80083954,5.93137085 7.80083954,5.6 C7.80083954,5.26862915 8.06941307,5 8.40071532,5 L11.4000942,5 C11.7313964,5 12,5.26862915 12,5.6 L12,8.6 C12.0015714,8.76016693 11.939078,8.91432522 11.8264055,9.02814808 C11.7137329,9.14197094 11.560236,9.20600801 11.4000942,9.206 L11.4000942,9.206 Z" id="路径" fill="#03C160" transform="translate(6, 8.4722) scale(1, -1) translate(-6, -8.4722)"></path>
                    </g>
                </g>
            </g>
        </g>
    </g>
</svg>

修改的地方只剩下一个fill就行

<?xml version="1.0" encoding="UTF-8"?>
<svg width="10px" height="20px" viewBox="0 0 10 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <title>向下备份</title>
    <g id="页面-1" stroke="none" stroke-width="1" >
        <g id="数据管理-普通表-报表详情备份-6" transform="translate(-1410, -161)" >
            <g id="向下备份" transform="translate(1415, 171) rotate(90) translate(-1415, -171)translate(1405, 166)">
                <rect id="矩形"  opacity="0" x="0" y="1.97780458e-14" width="20" height="10"></rect>
                <path fill="currentColor" d="M15.2114772,0.501653804 C15.52887,0.167217935 15.9114417,1.99005105e-14 16.3591923,1.99005105e-14 C16.806943,1.99005105e-14 17.1895147,0.167217935 17.5069075,0.501653804 C17.8356358,0.836089673 18,1.2362183 18,1.70203969 C18,2.16786108 17.8356358,2.56798971 17.5069075,2.90242558 L11.1477152,9.56725469 C11.0116897,9.73447262 10.8416578,9.85092797 10.6376196,9.91662073 C10.4335813,9.98231349 10.2182076,10.0091878 9.99149841,9.99724366 C9.76478923,9.98529952 9.54091392,9.93453693 9.31987248,9.8449559 C9.09883103,9.75537486 8.9089621,9.62697538 8.75026567,9.45975744 L2.49309245,2.90242558 C2.16436415,2.56798971 2,2.16786108 2,1.70203969 C2,1.2362183 2.16436415,0.836089673 2.49309245,0.501653804 C2.65178888,0.334435869 2.83032235,0.209022418 3.02869288,0.125413451 C3.22706341,0.0418044836 3.43110166,1.99005105e-14 3.64080765,1.99005105e-14 C3.85051364,1.99005105e-14 4.05738576,0.0418044836 4.26142402,0.125413451 C4.46546227,0.209022418 4.64682961,0.334435869 4.80552604,0.501653804 L10.0085016,5.9123484 L15.2114772,0.501653804 Z" id="路径"  transform="translate(10, 5) scale(-1, -1) translate(-10, -5)"></path>
            </g>
        </g>
    </g>
</svg>

2.使用并添加样式

<SvgIcon v-if="QoQ >= 0" name="icon-fall" size="12" class="fill-color2  mt-[5px] mr-[9px]"></SvgIcon>


.fill-color2 {
  fill: rgba(238, 55, 55, 1);
  color: rgba(238, 55, 55, 1);
}

.fill-color2:bover {
  fill: rgba(238, 55, 55, 1);
  color: rgba(238, 55, 55, 1);
}