修改svg图片颜色(结合sass）

1.下载sass

npm install  sass -g

npm install --save-dev sass-loader

我使用的版本

2.使用步骤

1.新建style文件夹，以及新建variable.scss，mixin.scss，main.scss

2.variable.scss

$color_1:#50E3C2;
$color_2:#FFF;

3.mixin.scss

@charset "utf-8";
@import "./variable.scss"; // 引入变量


@mixin add-svg-color($style) {
    filter: drop-shadow($style 0px -48px);
    [data-style="0"] & {
        filter: drop-shadow($color_2 0px -48px);
    }

    [data-style="1"] & {
        filter: drop-shadow($color_1 0px -48px);
    }

    [data-style="2"] & {
        filter: drop-shadow($color_2 0px -48px);
    }
}

4.main.scss

@import "./mixin.scss";


img {
     @include add-svg-color($color_2);
     transform: translateY(48px);
 }

5.index.html

<img :src="workbenchImg" />


export default {

 data() {
    return {
   workbenchImg: require("@/assets/workbench/nav/nav.svg"),

   }
}

}

3.总结

以上内容只适用于img标签内的svg图片，若是直接用svg标签需视情况而定