在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="#......" 都是可以的，然后保存一下即可。

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

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

Vue项目中操作svg文件
Vue项目中使用svg 引入依赖 yarn add svg-sprite-loader -D [可选] yarn add svgo svgo-loader -D 依赖说明: svg-sprite-lo ...
vue项目中一行文本文字根据关键字改变颜色改变展示颜色2
vue项目中一行文本文字根据关键字改变颜色改变展示颜色2 <script src="https://unpkg.com/vue@3/dist/vue.global.js&qu ...
vue项目中使用a标签下载视频文件
vue项目中使用a标签下载视频文件前提条件: 1.地址为http 2.文件格式为MP4(仅代表这次项目中使用的情况) 示例代码: <el-button size="mini" ...
Vue项目中使用Svg矢量图标
#Vue项目中使用Svg矢量图标使用npm install svg-sprite-loader –save命令或 cnpm install svg-sprite-loader –save命令进行安装 ...
在vue项目中使用svg图标
目录 VUE项目中为什么使用svg 1.在src/components下创建文件夹,命名为SvgIcon,并再SvgIcon文件夹下,新增目录index.vue文件: 2.在src目录下,新增文件夹, ...
如何在VUE项目中使用svg图标
一文带你搞定svg图标的使用! 文章目录前言一.SVG相较于字体图标的优点二.使用步骤 1.新建一个vue2项目 2.安装项目依赖 3 .在src目录下新建文件夹 4.创建svg-icon组件 ...
html js使用svg图标,Vue项目中使用svg图标
1,安装依赖 Vue项目的运行少不了安装依赖,使用svg同样. npm install svg-sprite-loader --save-dev 2,配置项目中找到build文件夹中的webpack ...
vue项目中使用svg，通过img标签轻量解决方案，支持动态颜色更改
前言 svg的优点不多说,怎么在vue项目优雅的使用svg?通过img似乎很优雅简单,但是你知道通过img引入svg怎么更改颜色吗?知道怎么动态切换颜色吗? 一.components下创建自定义公共s ...
vue踩坑记-在项目中安装依赖模块npm install报错
在维护别人的项目的时候,在项目文件夹中安装npm install模块的时候,报错如下: 图片.png 图片.png npm ERR! path D:\ShopApp\node_modules\fsev ...

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

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

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

最新文章

热门文章