阿里巴巴图标库iconfont,svg图标颜色无法改变的解决方案

当我们使用svg图标时,颜色无法改变,我遇到的问题时,fill属性填充了颜色导致无法更改,解决方案有2个,此文章未更新完,时间紧张,先简单记录下,先放个二维码方便联系

 

 

css方式

 svg {
        fill: currentColor;   
    }
    path{
      fill: unset;
    }

 

兼容性ie9+和现代浏览器

 

使用gulp过滤掉fill属性,需要对gulp有一定了解

var gulp = require('gulp');

var svgmin = require('gulp-svgmin');

var replace = require('gulp-replace');

// 文件路径

var paths = {

  svg: {

      src: 'src/**/*.svg',

      dest: 'dist/',

  }

};

gulp.task('svg', function () {

  return gulp.src(paths.svg.src)

  .pipe(replace(/fill=[\"\'](.+?)[\"\']/gmi, ''))

  .pipe(svgmin())

  .pipe(gulp.dest(paths.svg.dest));

});

阿里巴巴图标库iconfont,svg图标颜色无法改变的解决方案_第1张图片

你可能感兴趣的:(iconfont)