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>
修改的地方以及修改后
<?xml version="1.0" encoding="UTF-8"?>
<svg width="12px" height="12px" viewBox="0 0 12 12" fill="currentColor" 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="currentColor" 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="路径" transform="translate(6, 8.4722) scale(1, -1) translate(-6, -8.4722)"></path>
</g>
</g>
</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);
}