如何在gulp-svg-sprite插件中替换SVG的fill属性为CSS变量形式

要实现批量将SVG中的fill="#xxx"替换为fill="var(--color,#xxx)"，可以在gulp处理流程中添加文本替换或DOM解析处理步骤，配合gulp-svg-sprite完成自动化处理，以下是两种可行方案：

方案1：使用gulp-replace快速文本替换 #

这种方式适合简单的全局替换，通过正则匹配fill属性并替换。

步骤1：安装依赖 #

npm install gulp-replace --save-dev

步骤2：修改gulp任务 #

在生成SVG精灵之前，先对单个SVG文件执行替换操作：

const gulp = require('gulp');
const svgSprite = require('gulp-svg-sprite');
const replace = require('gulp-replace');

gulp.task('build-svg-sprite', () => {
  return gulp.src('src/icons/*.svg')
    // 替换fill属性：保留原颜色作为CSS变量的 fallback
    // 正则匹配所有非none/currentColor的fill值
    .pipe(replace(/fill="((?!none|currentColor)[^"]+)"/g, 'fill="var(--color,$1)"'))
    // 执行SVG精灵生成
    .pipe(svgSprite({
      mode: {
        symbol: {
          dest: '.',
          sprite: 'icons.svg' // 生成的精灵文件名
        }
      }
      // 其他svg-sprite配置项
    }))
    .pipe(gulp.dest('dist/img/icons'));
});

方案2：使用cheerio精准DOM解析替换 #

如果需要只替换特定元素（如path、circle）的fill属性，或更精准地过滤fill值，推荐用cheerio解析SVG DOM进行处理。

步骤1：安装依赖 #

npm install cheerio through2 --save-dev

步骤2：自定义转换函数 #

创建一个自定义的gulp流处理函数，用于遍历SVG元素并替换fill：

const gulp = require('gulp');
const svgSprite = require('gulp-svg-sprite');
const through = require('through2');
const cheerio = require('cheerio');

// 自定义替换fill属性的流函数
function replaceFillWithCSSVar() {
  return through.obj(function(file, enc, cb) {
    if (file.isBuffer()) {
      // 以XML模式加载SVG内容
      const $ = cheerio.load(file.contents.toString(), { xmlMode: true });
      
      // 选择需要处理的SVG元素（可根据需求调整选择器）
      $('path, circle, rect, polygon, ellipse').each(function() {
        const currentFill = $(this).attr('fill');
        // 跳过fill为none、currentColor或无值的情况
        if (!currentFill || currentFill === 'none' || currentFill === 'currentColor') return;
        
        // 替换为带CSS变量的fill属性
        $(this).attr('fill', `var(--color, ${currentFill})`);
      });
      
      // 更新文件内容
      file.contents = Buffer.from($.xml());
    }
    this.push(file);
    cb();
  });
}

// 构建SVG精灵的任务
gulp.task('build-svg-sprite', () => {
  return gulp.src('src/icons/*.svg')
    .pipe(replaceFillWithCSSVar())
    .pipe(svgSprite({
      mode: {
        symbol: {
          dest: '.',
          sprite: 'icons.svg'
        }
      }
    }))
    .pipe(gulp.dest('dist/img/icons'));
});

使用方式 #

生成SVG精灵后，在引用的SVG元素上通过CSS变量控制颜色：

/* 自定义图标颜色 */
.contact__email-image {
  --color: #ff4444;
}

/* 未设置--color时，会使用原fill颜色作为 fallback */

注意事项 #

• 如果你的SVG中有fill="currentColor"或fill="none"的元素，上述方案会自动跳过，避免破坏原有逻辑。
• 若需要针对不同图标设置不同的CSS变量名，可以修改替换逻辑，比如根据图标文件名生成不同的变量名（如--icon-mail-color）。

内容的提问来源于stack exchange，提问作者Rinatster