Как изменить npm module в своем проекте?

Question

[lavezzi1]

Здравствуйте. Есть модуль gulp-svg-symbol. Сразу после открытия боди добавляет все иконки. Нужно изменить его шаблон, то есть добавить display:none; Потому что сейчас белая полоса вверху страницы.

Как это сделать на своей стороне, чтобы люди которые сделают пул моего репозитория тоже видели это изменения? Чтобы у них оно тоже применилось.

<svg xmlns="http://www.w3.org/2000/svg" style="width:0; height:0; visibility:hidden;"><% if(defs) {%>
  <defs>
      <%= defs %>
  </defs><% } %><% _.forEach( icons, function( icon ){ %>
    <symbol id="<%= icon.id %>" viewBox="<%= icon.svg.viewBox %>"><% if (icon.title) {%>
      <title><%= icon.title %></title><% }%>
      <%= icon.svg.content %>
    </symbol><%
}); %></svg>

Answer 1

[Константин Величко]

Скорее всего у вас модуль не gulp-svg-symbol а gulp-svg-symbols.
В параметр templates можно указать свои шаблоны. https://www.npmjs.com/package/gulp-svg-symbols#advanced

Для него у меня такой таск в gulp.

gulp.task('combine-svg-icons', function (cb) {
	return gulp.src(['**/*.svg', '!**/_*.svg'], {cwd: 'source/static/icons'})
		.pipe($.plumber(options.plumber))
		.pipe($.imagemin(options.imagemin))
		.pipe($.svgSymbols({
			title: false,
			id: '%f',
			className: '%f',
			templates: [
				path.join(__dirname, 'source/static/styles/templates/icons-template.styl'),
				path.join(__dirname, 'source/static/styles/templates/icons-template.svg')
			]
		}))
		.pipe($.if(/\.styl$/, gulp.dest('tmp')))
		.pipe($.if(/\.svg$/, $.rename('icons.svg')))
		.pipe($.if(/\.svg$/, gulp.dest('dest/assets/images')));
});

Gulpfile полностью можете посмотреть на гитхабе https://github.com/zoxon/gulp-front

Comments

[lavezzi1]

У меня сборка tars и в консоли ругается что path is not defined когда пытаюсь указать путь на свой свг шаблон.

[Константин Величко]

Это уже другой вопрос )))
Спросите у Artem Malko в гиттере, не я tars разрабатывал.

[Artem Malko]

lavezzi1 а это повторяется во всех браузерах? Если что, то информацию о кастомном tamplate для svg можно тут посмотреть: https://github.com/tars/tars/issues/217

[lavezzi1]

Artem Malko: Во всех, то что по ссылке не решает проблему, перезаписал таск, но как создать темплей с display none? Скопировал содержимое svg-symbols.svg из npm_modules/gulp-svg-symbols и положил в свою папку, внес изменения и запустил сборку - ошибки повалились. Cannot read property 'hamburger' of undefined. Гамбургер название иконки.

[Artem Malko]

lavezzi1 что-то я оплошал) Можно поступить так, добавить в стили body > svg:first-of-type { display: none; }

[lavezzi1]

Artem Malko: Интересно, почему такой косяк в плагине, а все кто пользует - не замечает что ли?Получается сверху отступ на странице, ни висибилите хидден ни хейт не спасает

[Artem Malko]

lavezzi1: а в каком браузере это видно?

[lavezzi1]

Chrome, Firefox, Safari, Opera, Yandex

[Artem Malko]

lavezzi1: так, разобрался с тем, что нужно сделать. Можно выполнить действительно все то, что указано в issue, ссылку на который я привел выше. Просто нужно написать свой svg-template и назвать его svg-symbols.svg В нем вы можете написать какие-угодно стили для корневого svg-элемента

[Artem Malko]

lavezzi1: Я сделаю кастомный шаблон в TARS по умолчанию, чтобы не приходилось этого делать самому

[Artem Malko]

lavezzi1: https://github.com/tars/tars/issues/218 завел issue, постараюсь сегодня сделать

[lavezzi1]

Artem Malko: Можете приложить то, что нужно написать в svg-symbols.svg? Просто очень нужно. Спасибо

[Artem Malko]

lavezzi1: все, уже на бою фича) Проект можно обновить с помощью tars update-project --force

[Artem Malko]

lavezzi1: жду фидбека, помогло или нет)

[lavezzi1]

Artem Malko: Обновил, что изменилось? Не вижу

[Artem Malko]

lavezzi1: У тебя все также полоска есть? Какие стили на корневом svg элементе?

[lavezzi1]

Artem Malko: Да, есть. style="width:0; height:0; visibility:hidden;"

[Artem Malko]

lavezzi1: давайте в gitter? Значит не обновили. https://gitter.im/tars/tars?utm_source=badge&utm_m...