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

桃扇骨 2022-10-20 05:28 462阅读 0赞

# 在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="#......"` 都是可以的，然后保存一下即可。  
![在这里插入图片描述][20210517211953290.png]

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

[20210517211953290.png]: /images/20221020/f7f8c866b01547dfb4c0a017fff2a245.png