能否在gulp-svg-sprite生成的示例HTML中为SVG元素添加多个类？

好问题！要给gulp-svg-sprite生成的示例HTML里的<svg>标签添加多个类，其实有两种实用的方法，完全能满足你复制粘贴更便捷的需求：

方案一：自定义Handlebars模板（最灵活） #

gulp-svg-sprite支持通过自定义Handlebars模板来生成示例HTML，这意味着你可以完全控制<svg>标签的类名甚至整个HTML结构。

步骤： #

1. 在你的项目里新建一个模板文件，比如src/templates/sprite-example.hbs，内容如下（可按需调整结构和类名）：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>SVG Sprite 示例</title>
  <style>
    svg { width: 48px; height: 48px; fill: #333; margin: 0 10px 10px 0; }
  </style>
</head>
<body>
  <h2>所有SVG图标示例</h2>
  {{#each sprites}}
    <div class="icon-item">
      <!-- 直接在这里定义多个类名 -->
      <svg class="svg-{{name}} icon custom-icon" viewBox="{{viewBox}}">
        <use xlink:href="#{{name}}"></use>
      </svg>
      <span>{{name}}</span>
    </div>
  {{/each}}
</body>
</html>

2. 在gulp配置里指定这个自定义模板：

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

gulp.task('build-svg-sprite', function() {
  return gulp.src('src/icons/*.svg')
    .pipe(svgSprite({
      mode: {
        symbol: {
          example: {
            // 指向你的自定义模板文件路径
            template: './src/templates/sprite-example.hbs'
          }
        }
      }
    }))
    .pipe(gulp.dest('dist/icons'));
});

运行任务后，生成的示例HTML里的每个<svg>都会带有你定义的多个类名。

方案二：用类名格式化函数（更简洁） #

如果你只需要修改类名，不想自定义整个模板，可以通过配置prefix为一个函数，让它返回包含多个类名的字符串。

配置示例： #

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

gulp.task('build-svg-sprite', function() {
  return gulp.src('src/icons/*.svg')
    .pipe(svgSprite({
      mode: {
        symbol: {
          // 用函数返回多个类名，空格分隔即可
          prefix: function(iconName) {
            return `svg-${iconName} icon inline-icon`;
          },
          // 不需要默认的-dims类可以设为false关闭
          dimensions: '-dims',
          example: true // 必须开启示例HTML生成
        }
      }
    }))
    .pipe(gulp.dest('dist/icons'));
});

这个方法会让生成的<svg>标签类名变成svg-图标名 icon inline-icon dims（如果保留dimensions配置），完全符合你的需求。

两种方案里，自定义模板适合需要调整示例HTML整体结构的场景，类名函数则适合快速修改类名的情况，你可以根据自己的需求选择~

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