#html5 #svg #svg_animation #svg_спрайт
К примеру у меня есть подготовленный документ с SVG-спрайтами, в котором я объявляю каждую иконку через. Но когда я использую эти иконки через
Ответ 1
Первая неточность - не указан второй цвет в градиенте, допустим я выбрал stop-color="gold", вы можете выбрать любой другой цветЛучше не указывать style="display:none", так как применение и так скрывает содержание SVG до вызова его командой
#html #css #css3 #svg #svg_спрайт
Более развернуто, что я хочу получить в результате:
Как выбирать и дорабатывать изображения SVG (иконки в частности)
для включения в спрайт.
Какая должна быть структура и настройки спрайта, для того чтобы:
была возможность при однократном добавлении спрайта использовать его
компоненты во многих местах HTML страниц
была возможность стилизации иконок из внешней таблицы CSS
Требования к иконкам:
Иконки SVG должны быть масштабируемыми, то есть должны уменьшаться,
увеличиваться при уменьшении, увеличении окна просмотра гаджета, при
этом не выходить за границы своего контейнера.
Иконки должны менять цвет при наведении курсора
Иконки должны при необходимости выступать в роли ссылки
На картинке ниже макет того, что я хочу получить в результате
Ответ 1
Как выбирать и дорабатывать изображения SVG Иконки нарисованные в векторных редакторах: Inkscape, Adobe Illustrator и других, как правило требуют оптимизации для уменьшения веса и получения более понятного кода для последующей ручной доработки. Мне нравится svg-editor от Peter Collingridge, который очень прост для освоения и работает очень эффективно, снижая вес файла иконки в несколько раз. Для спрайта лучше всего подбирать иконки с одинаковыми параметрами: одноцветные, с линиями выполненными с помощью толькоили только . и необходимо преобразовывать в . Также необходимо, чтобы у выбранных иконок были одинаковые viewBox Например: viewBox="0 0 126 126" Пример иконки, которая будет использована в спрайте, смотри ниже В шапке SVG файла необходимо убрать - width="126" height="126" - это viewport, который мешает иконке была адаптивной. То есть иконка должна целиком занимать родительский контейнер .... и всё вместе размещается в секции... Код каждой иконки оборачивается тегами... с присвоением уникального идентификатора, по которому в дальнейшем будет вызов иконки командой
#html #css #css3 #svg #svg_спрайт
Более развернуто, что я хочу получить в результате:
Как выбирать и дорабатывать изображения SVG (иконки в частности)
для включения в спрайт.
Какая должна быть структура и настройки спрайта, для того чтобы:
была возможность при однократном добавлении спрайта использовать его
компоненты во многих местах HTML страниц
была возможность стилизации иконок из внешней таблицы CSS
Требования к иконкам:
Иконки SVG должны быть масштабируемыми, то есть должны уменьшаться,
увеличиваться при уменьшении, увеличении окна просмотра гаджета, при
этом не выходить за границы своего контейнера.
Иконки должны менять цвет при наведении курсора
Иконки должны при необходимости выступать в роли ссылки
На картинке ниже макет того, что я хочу получить в результате
Ответ 1
Как выбирать и дорабатывать изображения SVG Иконки нарисованные в векторных редакторах: Inkscape, Adobe Illustrator и других, как правило требуют оптимизации для уменьшения веса и получения более понятного кода для последующей ручной доработки. Мне нравится svg-editor от Peter Collingridge, который очень прост для освоения и работает очень эффективно, снижая вес файла иконки в несколько раз. Для спрайта лучше всего подбирать иконки с одинаковыми параметрами: одноцветные, с линиями выполненными с помощью толькоили только . и необходимо преобразовывать в . Также необходимо, чтобы у выбранных иконок были одинаковые viewBox Например: viewBox="0 0 126 126" Пример иконки, которая будет использована в спрайте, смотри ниже В шапке SVG файла необходимо убрать - width="126" height="126" - это viewport, который мешает иконке была адаптивной. То есть иконка должна целиком занимать родительский контейнер .... и всё вместе размещается в секции... Код каждой иконки оборачивается тегами... с присвоением уникального идентификатора, по которому в дальнейшем будет вызов иконки командой
#html #css #svg #icon #svg_спрайт
Есть спрайт
Который вот так вызывается
В хроме работает отлично как надо
Ответ 1
Можно ещё раз внимательно прочитать первую половину ответа насчет экспериментальных технологий Chrome, который не требует указания имени файла при вызове спрайта. А остальные браузеры требуют указания имени файла. #1. Вот смотрите, добавляю инлайн в HTML файл-спрайт с иконками: Работает во всех браузерах. #2. Для случая, когда спрайт оформлен в виде отдельного файла Если спрайт, в котором находится иконка является отдельным файлом, то необходимо сначала добавить этот файл в HTML И только потом вызывать иконку по ID из этого спрайта: Note Экспериментальные технологии Chrome в этом вызове допускают не указывать имя файла, в котором хранится иконка, но для более полной поддержки всеми браузерами лучше указывать имя файла
#javascript #html #css #svg #svg_спрайт
Имеется рисунок svg, я его сохранил в xml папке с сайтом и нужно как-то вывести
этот рисунок на страницу + управлять отдельными объектами этого svg рисунка с помощью
его ID. Может кто сталкивался с этим?
Ответ 1
Так как правила сайта не рекомендуют в ответе только ссылки на ответы-решения, приведу лишь часть ответа, которая уже поможет решить ваш вопрос, и затем дам ссылку на более полный ответ, как сделать спрайт, как управлять стилями элементов спрайта. Может попробовать использовать проверенный и надёжный способ добавления SVG-спрайта из отдельного файла в HTML с помощью . Подключение файла спрайта Вызов разных иконок из файла спрайта в разных местах HTMLБолее развернутый ответ здесьОтвет 2
document.addEventListener('DOMContentLoaded', () => { loadSvgInto(document.body, 'https://httpbin.org/image/svg').then(svg => { svg.setAttribute('height', '170px'); const rndColor = () => '#' + Math.floor(Math.random() * 0x111 + 0xddd).toString(16), letters = svg.querySelectorAll('#svg-text #S, #svg-text #V, #svg-text #G'); for (let letter of letters) letter.style.transition = 'fill 1.5s linear'; setInterval(() => { for (let letter of letters) letter.setAttribute('fill', rndColor()); }, 1500); }); }); // Добавляет SVG-разметку из url в элемент el, возвращает промис со ссылкой на добавленное (на корневой узел). // В отличие от более простого метода добавления через
#html #css #вёрстка #svg #svg_спрайт
Допустим есть некий холст: И есть некий элемент:Положение которого, зависит от координат. А если этих самых координат вагон и маленькая тележка, не переписывать же их все, чтобы элемент отображался не в верхнем левом углу, а в правом нижнем углу холста. Есть ли такой элемент контейнер в SVG в который можно поместить этот элемент path, и двигать его куда угодно и как угодно?
Ответ 1
Используйте для перемещения одного элемента SVG или группы элементов команду transform="translate(x y)" Ниже в примере полоса с надписью Start перемещена на 200px внизПри использовании команды
#svg #svg_спрайт
Использую на проекте svg-спрайт. Спрайт собирал с помощью gulp и плагинов (gulp-svg-symbols,
gulp-svgmin, gulp-cheerio). Проблема в том, что при изменение размера иконки в CSS,
она изменяется в непонятных мне пропорциях. Я задал иконке width: 46px, но она не увеличилась
на 46px. На скриншоте видно, как поле вокруг иконки стало размером 46px, а сама иконка
нет. Как правильно контролировать размер иконок в svg-спрайте?
Ссылка на картинку
Пример кода, который я использую:
.nav__icon-check {
width: 46px;
height: 46px;
outline: 1px solid red;
}
Пример на codepan.
Ответ 1
В общем-то, у вас при увеличении SVG-элемента иконка увеличивается, но она изначально не занимает всё полотно, потому это слабо заметно. Вам надо изменить значение viewbox-атрибута на, скажем "0 0 25 25". А дальше увеличивайте/уменьшайте иконку сколько душе угодно. .nav__icon-check { width: 100px; height: 100px; outline: 1px solid red; }
#javascript #html #gulp #svg_спрайт
Есть небольшая gulp сборка для проекта.
Плагины:
gulp-inject
browsersync
gulp-watch
gulp-useref
gulpfile.js:
var
gulp = require('gulp'),
...
var path = {
app : { // Исходники
html : 'app/*.html',
js : 'app/js/*.js',
svg : 'app/**/*.svg',
},
dist : { // Релиз
html : 'dist/',
js : 'dist/js/',
},
watch : { // Наблюдение
html : 'app/**/*.html',
svg : 'app/**/*.svg',
js : 'app/js/**/*.js',
}
};
// Настройка сервера
var config = {
server : {
'baseDir' : './dist'
},
host : 'localhost',
port : 9000,
tunel : true,
};
// Работа с HTML
gulp.task('html', ['svg'], function(){
gulp.src(path.app.html)
.pipe(rigger())
.pipe(useref())
.pipe(gulpif('*.js', uglify()))
.pipe(gulpif('*.css', minifyCss()))
.pipe(inject(svgContent, { transform: fileContents }))
.pipe(gulp.dest(path.dist.html))
.pipe(reload({stream : true}));
});
// Работа с JS
gulp.task('js', function(){
gulp.src(path.app.js)
.pipe(gulp.dest(path.dist.js))
.pipe(reload({stream : true}));
});
// Работа с SVG
function fileContents (filePath, file) {
return file.contents.toString();}
var svgContent = gulp.src(path.app.svg)
.pipe(svgmin())
.pipe(svgstore({ inlineSvg: true }))
.pipe(reload({stream : true}));
gulp.task('svg', function () {
var svgs = svgContent;
});
// Наблюдение
gulp.task('watch', function () {
watch([path.watch.html], function(event, cb){
gulp.start('html');
});
watch([path.watch.html], function(event, cb){
gulp.start('svg');
});
watch([path.watch.js], function(event, cb){
gulp.start('js');
});
});
// Запуск вебсервера
gulp.task('webserver', function(){
browserSync(config);
});
// Чистка
gulp.task('clean', function(cb){
clean(path.clean, cb);
});
// Задачи по-умолчанию
gulp.task('default', [
'html',
'svg',
'js',
'webserver',
'watch'
]);
html:
...
...
...
Все работает неплохо, до изменений в html файле. Любое изменение приводит к исчезновению
скомпилированного инлайн svg файла внутри html файла (внутри inject).
Вопрос: Можно ли настроить gulpfile.js так, чтобы можно было вносить изменения в
html файл без перезапуска всей сборки в консоли и без потери сформированного svg спрайта
внутри html файла?
Пробую так:
В gulpfile.js:
// Таск для html
gulp.task('html', function(){
gulp.src(path.app.html)
.pipe(useref())
.pipe(gulpif('*.js', uglify()))
.pipe(gulpif('*.css', minifyCss()))
.pipe(gulp.dest(path.dist.html))
.pipe(reload({stream : true}));
});
// Таск для SVG
gulp.task('svg', function () {
var svgs = gulp.src(path.app.svg)
.pipe(svgstore({ inlineSvg: true }));
function fileContents (filePath, file) {
return file.contents.toString();
}
return gulp.src(path.app.html)
.pipe(inject(svgs, { transform: fileContents }))
.pipe(gulp.dest(path.dist.other));
});
Все работает, вебсервер перезапускается очищается с внесением изменений в любой файл
html, css и сохранением svg спрайта, НО перестал работать useref().
....
Собирает vendor.js, но не записывает в html. А должен после генерации быть:
Ответ 1
Как альтернатива, но не решение. Пришлось отказаться от inject svg и заменить его на rigger. В html: //= svg-sprite.html Соответственно создаю еще файл svg-sprite.html в который вставляю сгенерированный svg спрайт. Генерирую с помощью ресурса icomoon.io. gulpfile.js: // Work with HTML gulp.task('html', function(){ gulp.src(path.app.html) .pipe(rigger()) .pipe(useref()) .pipe(gulpif('*.js', uglify())) .pipe(gulpif('*.css', minifyCss())) //.pipe(inject(svgContent, { transform: fileContents })) .pipe(gulp.dest(path.dist.html)) .pipe(reload({stream : true})); }); Все таски по svg не нужны.
#html #css #html5 #svg #svg_спрайт
Есть сгенерированый svg спрайт - sprite.svg c symbol:
Ответ 1
Как правило решение проблем с отображением иконок из спрайта можно разделить на три части: Код иконок и спрайта, - так как вы их не включили в вопрос, трудно сказать что-то определенное. Надеюсь вы добавите коды хотя-бы одной иконки и части спрайта. Подключение файла спрайта. Подключение внешней таблицы стилей и стилизация самих иконок. Подключение файла спрайта При подключении файла спрайта через теги background-image внешняя таблица стилей не будет работать, поэтому лучше подключать через тег
#css #svg #svg_спрайт #sprite
Кто сталкивался со следующей проблемой?
Есть иконки соц. сетей, в формате svg. Нарисованные в Иллюстраторе. Вот пример кода
одной из иконок:
Вот так она должна выглядеть:
При помощи gulp-svg-sprite, gulp-svgmin, gulp-cheerio, gulp-replace создаю спрайт
и вставляю его в html:
Когда сборка запускается и открывается страница в браузере я вижу следующую картину:
Получается, что круг и иконка внутри круга полностью залиты чёрным цветом.
Проблема в том, что при изменении стилей у иконки (fill-opacity, stroke и stroke-width)
меняются оба объекта (круг и логотип внутри круга):
Если вставлять инлайн, то иконка отображается корректно.
Если удалить в коде svg иконки все стили, а сверху добавить строчку, указывающую
на внешнюю таблицу стилей , то всё равно
заливка остаётся.
Как грамотно сделать нормальное отображение иконки?
Ответ 1
Вы должны добавить спрайт в HTML при помощи object: ` Далее можно вызывать иконки из спрайта внутри HTML:upd Спрайт уже добавлен в DOM, поэтому необязательно указывать его при вызове иконок. Вы правильно сделали, что указали в спрайте ссылку на внешнюю таблицу стилей Вы правильно сделали, что удалили стили из спрайта, так как внутренние стили команд SVG имеют наивысший приоритет по сравнению со стилями во внешних и внутренних таблицах CSS Добавьте еще во внешнюю таблицу стилей принудительное наследование: svg path { fill:inherit; stroke:inherit; } Теперь можно управлять стилями иконок из внешней таблицы CSS.Ответ 2
Писал ответ на вопрос в комментариях,- не вошло. Поэтому оформляю как, отдельный ответ, может будут дополнительные вопросы по наладке, буду отвечать здесь. Пробуйте вынести object наружу из под тега он должен добавляться в HTML, DOM, как самостоятельный элемент. А вот при вызове иконок можно уже обернуть svg в теги Внешнюю таблицу стилей, которая управляет svg лучше разместить в той же директории, что и Index файл HTML, к этому особо чувствителен Chrome Вы её можете сделать специально для SVG и потом через import добавить к основной таблице стилей. Смотрите другие ответы по спрайтам. У ребят рано или поздно получилось всё. https://ru.stackoverflow.com/questions/tagged/svg-%d1%81%d0%bf%d1%80%d0%b0%d0%b9%d1%82
#svg #svg_спрайт
Как объединить несколько svg в один svg наиболее простым и правильным способом? Например, у меня есть вот такой набор svg:
Но мне нужно, чтобы вместо десяти svg у меня это была один целый svg. Что-то вроде такого:
Ответ 1
Элементы svg повторяются, поэтому их можно клонировать с помощью команды
#веб_программирование #svg #svg_спрайт
Здравствуйте. Хочу использовать на сайте картинки svg вместо png, скорее всего их
спрайт. Интересует возможность масштабировать картинки (для разных устройств) и менять
цвет (например при hover). Кроссбраузерность. Поддержка "старых" браузеров не принципиальна
(будет поддерживать - хорошо, не будет - не страшно), анимация тоже не обязательна...
Необходима обязательная поддержка IPAD, MAC OS, IPhone...
Как подключить svg спрайты написано много, есть споры, в основном статьи написанные
несколько лет назад ...
Подскажите, как это сделать по best practics в нынешних реалиях? (возможно личный опыт)
Использую SASS, возможно под него есть "заточенные" решения.
Ответ 1
Поскольку Gulp является уже де-факто стандартом для сборки фронтенда, думаю, будет уместно сразу начать с предложения использовать для создания SVG-спрайта плагин gulp-svg-sprites. Теперь что касается ваших вопросов: возможность масштабировать — поскольку это SVG, то проблем с масштабированием не будет даже исходя из аббревиатуры. возможность менять цвет — имеется, через CSS (в режиме symbols). кроссбраузерность — ИЕ9 и выше Без дополнительных настроек результатом работы плагина gulp-svg-sprites будет SVG-файл со всеми вашими иконками в виде обычного спрайта, подобного PNG-спрайту, и CSS-файл со стилями вида .%icon_name% {}. При необходимости получить другие результаты на выходе, придется конфигурировать плагин. Плюс использования такого спрайта в том, что иконки можно использовать в псевдоэлементах. Минус — простыми способами перекрасить элемент спрайта нельзя (можно перекрасить через CSS-фильтры или заранее сгенерировать элемент во всех нужных цветах). Также есть возможность сделать спрайт как набор элементов symbol, как группы, есть вариант с генерацией png-фоллбека. Если вы используете SASS в синтаксисе SCSS, то можно также получить сгенерированный SCSS-файл со стилями.Ответ 2
Мне кажется проще создать спрайт используя Symbol, в нем fill='inherit', и дальше уже манипулировать цветом svg. соответсвенно и hover и т.п. описывать в class="svg".
#html #css #svg #svg_спрайт
Столкнулся с проблемой, связанной с изменением цвета иконок svg. Придерживался этой
инструкции.
Есть спрайт svg и отдельный стилевой файл для него:
.icon {
display: inline-block;
width: 1em;
height: 1em;
fill: currentColor;
}
.icon-youtube {
font-size:(13/10)*1rem;
width:(15/13)*1em;
}
Подключаю на html через use:
оба варианта ниже не работают
.icon-youtube svg:hover { color: red; fill: red; }
.icon-youtube:hover { color: red; fill: red; }
Проблема заключается в изменении цвета при наведении на иконку. Пробовал и fill,
и color. Ничего не работает.
Ресурс
3 Ответ 1
У SVG для покраски строки нужно применять атрибут - stroke:red; Ваше правило CSS должно быть таким : .icon-youtube svg:hover { stroke: red; fill: red; } .icon-youtube:hover { stroke: red; fill: red; }` Проверьте также и удалите, если они есть, атрибуты fill, stroke у иконок в спрайте, так как они имеют наивысший приоритет. Добавьте во внешнюю таблицу CSS принудительное наследование для атрибутов SVG: svg path { stroke:inherit; stroke-width:inherit; fill:inherit; } Это всё относится, конечно к чистому SVG, а у вас действительно растровая иконка встроенная векторным редактором в SVG. Выбирайте всегда SVG иконки, которые весят немного. Это верный признак того, что они сделаны профессионально,- патчами, а не лепкой, градиентами, маркерами в векторных редакторах. Один из полезных ресурсов для выбора SVG иконок Выше были теория, но практика всегда интересней? Скачал две иконки svg c ресурса iconmonstr: youtube - 1.8к; facebook - 0.3k 1. Пример закрашивания одной иконки при наведении svg path { fill:inherit; stroke:inherit; stroke-width:inherit; } .icon-youtube:hover { fill:red; } 2. Пример анимации закрашивания иконок Добавлен к первому примеру код второй иконки и анимация закрашивания при наведении: .icon-youtube{ transition: all .5s ease; } .icon-youtube:hover { fill:red; } svg path { fill:inherit; stroke:inherit; stroke-width:inherit; } .icon-youtube{ transition: all .8s ease; } .icon-youtube:hover { fill:red; } UPD Ещё пример, как добавлять социальные иконки и изменять цвет при наведенииОтвет 2
Необходимо перенести код svg на html страницу и подключать в ксс через fill. html:
#svg #gulp #svg_спрайт
Создаю спрайт с помощью gulp (плагин gulp-svg-sprites). В Mozilla отображается нормально,
в хроме открываю - всё сдвинуто.
Если из конечного svg я генерирую png-спрайт (плагин gulp-svg2png), и подключаю его
вместо svg, то во всех браузерах отображается нормально. т.е. я так понимаю это что-то
связано именно из интерпретацией браузером.
Как исправить?
Пример моего спрайта после галпа есть здесь . При изменении размеров бегунком в хроме
этот баг тоже можно увидеть (хорошо заметно при максимальном увеличении, на белых -
когда инвертировать фон).
В мозиле всё нормально.
P.S. Обновил спрайт - установил, чтобы viewBox у всех элементов начинался с "0 0.
не помогло.
Настройки gulp:
gulp.task('svg-sprites:build', function () {
return gulp.src(options.theme.img_svg_src + '*.svg')
.pipe(svgSprite())
.pipe(gulp.dest(options.theme.img_src + 'dict'))
.pipe(filter(options.theme.img_src + 'dict/svg/*.svg'))
.pipe(gulp.dest(options.theme.img_src + 'dict'));
});
Ответ 1
Короткий ответ Удалите атрибут viewBox="0 0 41 2023" из SVG. Впрочем, остальные viewBox тоже можете удалить. Можно сделать это автоматически с помощью svgo (плагин removeViewBox). Длинный ответ Это похоже на баг Chrome, связанный с расчетом background-size, когда background-size по горизонтали не кратен ширине viewBox в SVG. Смотрите, у вас background-size задается в em: 4.1em 202.3em (sprite.css:5). А изменение размеров картинок задается через font-size от 2 до 14 px. Исходное значение font-size равно 10px, поэтому при открытии страницы размер фона в пикселях получается 41x2023 px, как раз как viewBox в SVG. Можно прописать background-size: 41px 2023px и все останется по-прежнему. Но если указать на пиксель меньше: background-size: 40px 2023px, мы увидим смещение по вертикали. Хотя, казалось бы, картинка должна стать просто немного уже. Поэтому при изменении шрифта все едет. Если задать размер шрифта 11px, то ширина фона получится 4.1em * 11px = 45.1px, а это не кратно 41 (ширина исходного viewBox). Следующее значение шрифта, при котором все показывается нормально - 20px: размер background-size по горизонтали становится 82px, что кратно 41. Я точно не берусь описать все особенности этого бага (иногда он проявляется, иногда нет), но суть в том, что решение простое: удалите атрибут viewBox="0 0 41 2023" из SVG. Впрочем, остальные viewBox тоже можете удалить. Можно сделать это автоматически с помощью svgo (плагин removeViewBox). Пример для gulp: gulp.task('remove-viewbox', function() { var svgmin = require('gulp-svgmin'); return gulp.src('src/*.svg') .pipe(svgmin({ plugins: [ {removeViewBox: true} ] })) .pipe(gulp.dest('dest/')); });Ответ 2
Вы наверное уже догадались, что в Chrome видите вместе с основной иконкой низ предыдущей иконки. Причин тут может быть много, но основных две: У каждого браузера свои стили, поэтому лучше их сбросить отдельным файлом reset.css от Эрика Майера, либо применить Normalize.css, почитайте перевод статьи здесь. Вторая, основная причина - подбор иконок с разными пропорциями. У одних width="7" height="7" viewBox="0 0 7 7, у других viewBox="231 233 38 34 Видите, тут пришлось двигать иконку с помощью viewBox. И дальше, если посмотреть, запустите SVG файл спрайта локально, то увидите большие пробелы, это просто иконки не попадают в зону видимости. Чтобы избежать таких рисков и непоняток, может быть проще найти SVG иконки с одинаковыми атрибутами. Таких подборок очень много в сети, где прямо они отсортированы по размерам 32x32; 64x64; 128x128...Ответ 3
Вариант 1: удаление у исходных файлов ViewBox Используйте плагины gulp-imagemin и imagemin-svgo для удаление ViewBox: var gulp = require('gulp'), svg-sprites = require('gulp-svg-sprites'), imagemin = require('gulp-imagemin'), imageminSvgo = require('imagemin-svgo'); gulp.task('svg-sprites:build', function () { return gulp.src(options.theme.img_svg_src + '*.svg') .pipe(imagemin([ imageminSvgo({ plugins: [ {removeViewBox: true} ] }) ])) .pipe(svgSprite()) .pipe(gulp.dest(options.theme.img_src + 'dict')) .pipe(filter(options.theme.img_src + 'dict/svg/*.svg')) .pipe(gulp.dest(options.theme.img_src + 'dict')); }); Вариант 2: заменить SVG-спрайт на иконочный шрифт Предпочтительней было бы использование иконичного шрифта вместо спрайтов. И у этого метода есть ряд преимуществ: Более меньший вес шрифта, чем спрайта; Гибкость стилизации через CSS; Меньший вес CSS. Для генерации иконочного шрифта я бы посоветовал такую комбинацию: // Generate icon font gulp.task('iconfont', function() { var fontName = 'icon-font', cssClass = 'i'; // Исходные SVG-файлы gulp.src(['./fonts/icon-font/*.svg']) .pipe(iconfontCss({ fontName: fontName, cssClass: cssClass, path: './styl/mixins/icon-font.styl', targetPath: '../../styl/components/font/icon-font.styl', fontPath: '../fonts/' })) .pipe(iconfont({ fontName: fontName, prependUnicode: true, normalize: true, formats: ['svg','ttf','woff','woff2'] })) .pipe(gulp.dest('./public/fonts/')); }); Миски для стилей, который берется из этой строки path: './styl/mixins/icon-font.styl' будет выглядеть так: @font-face font-family "<%= fontName %>" src: url('<%= fontPath %><%= fontName %>.woff2') format('woff2'), url('<%= fontPath %><%= fontName %>.woff') format('woff'), url('<%= fontPath %><%= fontName %>.ttf') format('truetype'), url('<%= fontPath %><%= fontName %>.svg#<%= fontName %>') format('svg') [class*="i-"] position relative display inline-block width 1em height 1em &:before font 14px '<%= fontName %>' font-size inherit text-rendering auto speak none font-variant normal text-transform none color inherit position absolute top 50% left 50% transform translate(-50%, -50%) <% _.each(glyphs, function(glyph) { %> .<%= cssClass %>-<%= glyph.fileName %>:before content "\<%= glyph.codePoint %>" <% }); %> После генерации шрифта все, что вам нужно будет сделать, это подключить сгенированный CSS к вашему сайту или инглудить его к главному CSS-файлу, а затем использовать таким образом:Ответ 4
Я взял ваш спрайт и для наглядности немного отформатировал код, не изменяя его сущности. Обратите внимание, что за вертикальные пробелы между иконками отвечают атрибуты viewport, которые обычно не указывают, так как по умолчанию они x="0" y="0" - это верхний левый угол. В вашем варианте для первой иконки y="0", для второй иконки - y="32", далее y="64" То есть вертикальное позиционирование исключительно зависит от этих параметров. Первый вариант решения - необходимо увеличить зазоры между иконками, то есть увеличитьY Внизу пример, как было, видите практически нет зазора между иконками. Во втором примере зазор увеличен на 8px; y=0;40;80;120 Учитывая, что в вашем варианте вы жестко привязаны к позиционированию иконок внутри спрайта и как выясняется это может приводить к непредсказуемым эффектам, можно предложить - Второй вариант сделать классический спрайт, используя тегии команды вызова