Генерация Iconfont внезапно сломана

У нас есть сайт со множеством иконок SVG. Глупое задание превращает их в значок шрифта в .eot, .ttf а также .woff форматы. Все работало хорошо до недавнего времени, когда были добавлены два новых символа.

После добавления новых значков большинство существующих теперь отображаются со странными шаровыми шарнирами там, где должны быть кривые. Например, одна из иконок должна выглядеть так:

Макрофотография оригинального SVG

Но вместо этого мы получаем это:

Макрофотография значка в файле шрифта TTF

Что может быть причиной этого? Преобразование выполняется с использованием gulp-iconfont, который использует svgicons2svgfont а также svg2ttf, Я пытался настроить параметры, но ничего не помогло. Я даже удалил новые глифы и снова сгенерировал шрифт, но все по-прежнему выглядит прикольно. Между ними не было изменено ни одной версии модуля npm.

Вот код SVG для иконки в примере для справки:

<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 700 700"><defs><style>.cls-1{fill:#333;}</style></defs><path class="cls-1" d="M596.06,140H564.15V105a35.1,35.1,0,0,0-35-35H467.46a35.1,35.1,0,0,0-35,35v35H267.52V105a35.1,35.1,0,0,0-35-35H170.84a35.1,35.1,0,0,0-35,35v35h-31.9A34,34,0,0,0,70,173.89v422.2A34,34,0,0,0,103.94,630H596.06A34,34,0,0,0,630,596.09V173.89A34,34,0,0,0,596.06,140Zm-122.73-9.11a17.55,17.55,0,0,1,17.5-17.5h14.95a17.55,17.55,0,0,1,17.5,17.5v38.28a17.55,17.55,0,0,1-17.5,17.5H490.83a17.55,17.55,0,0,1-17.5-17.5V130.87Zm-296.62,0a17.55,17.55,0,0,1,17.5-17.5h14.95a17.55,17.55,0,0,1,17.5,17.5v38.28a17.55,17.55,0,0,1-17.5,17.5H194.21a17.55,17.55,0,0,1-17.5-17.5V130.87ZM571.67,567a4.61,4.61,0,0,1-4.59,4.63H133a4.61,4.61,0,0,1-4.66-4.56V238a4.59,4.59,0,0,1,4.6-4.63H567a4.59,4.59,0,0,1,4.64,4.56V567Z"/><path class="cls-1" d="M249.56,435.78c10.67,0,15.11,5.51,15.11,14.93s-4.44,14.93-15.11,14.93H177c-9.42,0-15.11-7.11-15.11-14.76,0-11,2.67-16.71,35.38-39.47l16.89-11.73c8.71-6,11.91-11,11.91-18.31,0-8.71-5.87-14.4-15.47-14.4-20.27,0-9.78,24.71-29.87,24.71-12.8,0-17.42-7.11-17.42-17.24,0-17.07,16.71-35.2,48.35-35.2,37.87,0,51,20.62,51,40.35,0,14.93-7.47,25.6-23.29,35.56l-32.18,20.27v0.36h42.31Z"/><path class="cls-1" d="M323,440.23H281c-12.09,0-16.71-8.36-16.71-19,0-6.58,2.84-12.62,10.67-22l37.15-44.8c10.13-12.09,15.29-16.18,24.53-16.18,13.33,0,20.8,7.29,20.8,18.84v55.47c10.49,0,17.07,3.2,17.07,13.87,0,10.84-6.58,13.87-17.07,13.87v8.53c0,11.73-5.69,19.2-17.24,19.2S323,460.49,323,448.76v-8.53Zm0-66h-0.36l-29.15,38.22H323V374.27Z"/><path class="cls-1" d="M413.82,346.36c3.38-9.78,5.33-11.73,13.15-11.73,5.69,0,13,3.73,13,12.27,0,3.2-2,8.71-5,17.42l-32.71,92.62c-3.38,9.78-5.33,11.73-13.16,11.73-5.69,0-13-3.73-13-12.27,0-3.2,2-8.71,5-17.42Z"/><path class="cls-1" d="M456.66,370.36c-10.49,0-15.82-5.51-15.82-14.4s5.33-14.4,15.82-14.4H526c11,0,17.6,4.09,17.6,15.64,0,6.76-3.56,12.62-16,25.78-7.29,7.64-21.87,34.67-25.07,59.91C499.68,465.47,490.44,468,481.37,468c-7.82,0-15.82-7.11-15.82-16.36,0-23.11,27.38-69.86,40.53-81.24H456.66Z"/></svg>

Вот наша глоточная задача:

var iconfont = require('gulp-iconfont'),
  iconfontCss = require('gulp-iconfont-css'),
  order = require('gulp-order'),
  jsonfile = require('jsonfile'),
  tap = require('gulp-tap');

module.exports = function(gulp, plugins) {
  'use strict';

  return function() {
    var runTimestamp = Math.round(Date.now()/1000),
      fontName = 'customer-icons',
      iconPaths = ['src/assets/icons/iconfont/*.svg'],
      codepointFile = 'src/assets/icons/iconfont/glyphs.json',
      existingGlyphs = [],
      saveGlyphs = [],
      basePath = process.cwd();

    try {
      // If we already have a JSON of glyphs that have been assigned a codepoint,
      // load that data first so we can pass the icons in the same order to avoid
      // showing wrong icons when new ones are added.
      existingGlyphs = jsonfile.readFileSync(codepointFile).glyphs.concat(iconPaths);
    }
    catch(e) {} // No need to do anything, just use the default empty array.

    return gulp.src(iconPaths)
      .pipe(order(
        existingGlyphs, { base: basePath }
      ))
      .pipe(tap(function(file) {
        saveGlyphs.push(file.path.match(/(src\/assets\/icons\/iconfont\/.*)/)[1]);
      })).on('end', function() {
        jsonfile.writeFile(codepointFile, { glyphs: saveGlyphs }, function(err) {
          if(err !== null) {
            console.error('Error saving glyph file: ' + err);
          }
        })
      })
      .pipe(iconfontCss({
        fontName: fontName,
        path: 'scss',
        targetPath: '../../../base/iconfont.scss',
        fontPath: '/.resources/customer-ui-module/webresources/assets/fonts/customer-icons/'
      }))
      .pipe(iconfont({
        fontName: fontName,
        appendUnicode: true,
        fontHeight: 1001,
        normalize: true,
        formats: ['ttf', 'eot', 'woff'], // default, 'woff2' and 'svg' are available
        timestamp: runTimestamp, // recommended to get consistent builds when watching files
      }))
      .on('glyphs', function(glyphs, options) {
        // CSS templating, e.g.
        // console.log(glyphs, options);
      })
      .pipe(gulp.dest('src/assets/fonts/customer-icons'));
  };
}

0 ответов

Другие вопросы по тегам