学习踩坑：在Vue项目中使用svg标签却无法改变图标的颜色

在Vue项目中使用svg标签却无法改变图标的颜色

在学习 vue 实战项目的过程中，用到了 svg 模块，对其使用了 fill 属性后，图标的颜色却没有任何的改变，反复查看了视频，步骤是一模一样的，却发现还是不行，差点怀疑人生，代码如下：

<template>
    <svg :class="svgClass" aria-hidden="true">
        <use :xlink:href="svgUrl"></use>
    </svg>
</template>
<script>
import { ref, computed } from '@vue/composition-api'
export default {
    name: "svgIcon",
    // props: ["iconClass", "iconUrl"],
    props: {
        iconClass: {
            type: String,
            default: ""
        }, 
        iconUrl: {
            type: String,
            default: ""
        }
    },
    setup(props) {
        const svgUrl = computed(() => `#icon-${props.iconUrl}`);
        const svgClass = computed(() => {
            if(props.iconClass) {
                return `svg-icon ${props.iconClass}`;
            }
            else {
                return `svg-icon`;
            }
        });
        return {
            svgClass,
            svgUrl
        }
    }
}
</script>
<style lang="scss">
    .svg-icon {
        width: 1em;
        height: 1em;
        fill: currentColor;
    }
</style>

查了很多资料却没有结果，终于在一位大佬的博客里面发现了希望。以上代码没有任何问题，问题出在 svg 文件，打开 svg 文件，可以发现 path 标签里有一个 fill 属性，并且该 fill 属性被赋了值，所以无论如何折腾，图标的颜色始终唯一，这时候，直接干掉他或者改成 fill="#......" 都是可以的，然后保存一下即可。

感谢您的耐心观看！
学习分享，一起成长！以上为小编的学习分享，若存在不当之处，请批评指正！