svg - 使用 gulp-svg-sprite 生成 SASS mixin？

Question

我正在使用 gulp-svg-sprite 插件。

https://github.com/jkphl/gulp-svg-sprite

https://github.com/jkphl/svg-sprite

我已经有了我想要 Sprite 的类和样式:

    .header {
      background: grey;

      &:after {
        content: "";
        display: block;
        height: 30px;
        width: 30px;
        background: url(images/icon1.svg);
      }
    }

这是我的任务:

    spriteConfig    = {
      mode          : {
        css        : {
          bust      : true,
          render    : {
            scss    : true
          }
        }
      }
    };

    gulp.task('sprite', function() {
      gulp.src('images/svg/*.svg')
        .pipe(svgSprite(spriteConfig))
        .pipe(gulp.dest('dest/'));
    });

任务生成这种类型的 SASS:

    %svg-common {
        background: url("svg/sprite.css-c3700f6a.svg") no-repeat;
    }

    .svg-icon1 {
        @extend %svg-common;
        background-position: 50% 0;
    }

    .svg-icon1-dims {
        width: 1024px;
        height: 348px;
    }

这并不理想，因为我需要导入这些我不会自己使用的 svg- 类，然后我需要使用 2 个扩展:

    .header {
      background: grey;

      &:after {
        content: "";
        display: block;
        @extend .svg-icon1;
        @extend .svg-icon1-dims;
      }
    }

有没有一种方法可以生成 mixin，这样我就可以得到类似的东西:

    .header {
      background: grey;

      &:after {
        content: "";
        display: block;
        @include svg-icon1;
      }
    }

Answer 1

根据 docs :

It comes with a set of Mustache templates for creating stylesheets in good ol' CSS or one of the major pre-processor formats (Sass, Less and Stylus). Tweaking the templates or even adding your own custom output format is really easy, just as switching on the generation of an HTML example document along with your sprite.

查看并自定义以下文件:

https://github.com/jkphl/svg-sprite/blob/master/tmpl/css/sprite.scss