Верстальщик html страницmariia.belogubova@gmail.com

Как сгенерировать svg-спрайт и подключить иконки?

CSS + SVG иконки

Как добавить иконки на сайт?

Векторный SVG формат предназначен для описания масштабируемых динамически изменяемых векторных изображений. В 2020 году активно используется в вебе для описания иконок и анимации векторных изображений. Для современных адаптивных сайтов svg формат идеального подходит и активно используется верстальщиками и фронтенд разработчиками, так как он ускоряет процесс разработки и положительно сказывается на загрузке сайта.

Пошаговая инструкция по добавлению svg иконок на сайт

  1. Поиск или прорисовка svg иконок.
  2. SVG файлы добавляем в папку для иконок. Например, в отдельную папку с названием icons.
  3. Настраиваем автоматическую сборку. В моем случае, загружаю пакет gulp-svgstore и настраиваю задачу в файле gulpfile.js.
  4. В html странице вызываем нужную иконку через svg и use с указанием уникального идентификатора.
SVG-спрайт// Файл с иконками/img/sprite.svg 

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<symbol id="icon-arrow-to-right" viewBox="0 0 32 32">
<circle class="circle" cx="16" cy="16" r="15"/>
<path d="M16.14 9.93L22.21 16l-6.07 6.07M8.23 16h13.98"/>
</symbol>
<symbol id="icon-one-more" viewBox="0 0 32 32">
...
</symbol>
</svg>
HTML:
<svg class='icon'>
<use xlink:href = '/img/sprite.svg#icon-arrow-to-right' />
</svg>

Для того чтобы пользоваться всеми преимуществами svg иконок, нам потребуется создать svg-спрайт. SVG-спрайт состоит из тегов svg и symbol с уникальным id для каждой иконки. Тег symbol не отображается на странице и предназначен для объявления символов, которые позже будут использоваться на странице.

SVG-cпрайт можно сделать самостоятельно, но лучше воспользоваться автоматической сборкой. Для этого нам потребуется пакет gulp-svgstore.

Плюсы svg-спрайта

Поговорим о преимуществе svg-спрайта перед другими спрайтами.

  • Управление svg иконками с корневого уровня страницы. Т.е. через css есть доступ к стилям, тегам и атрибутам svg изображений. Например, при наведении на иконку мы можем поменять цвета fill, stroke, размер и, еще интереснее, изменить векторные линии.
  • Доступность. Можно добавить тег title и атрибут aria-lableledby='id нашего title', либо использовать атрибут aria-lable.
  • Простота сборки и использования.
Автоматическая сборка svg спрайта
// gulpfile.js

const svgstore = require('gulp-svgstore');
gulp.task("sprite", function () {
return gulp.src("source/img/icons/*.svg")
.pipe(svgstore({
inlineSvg: true
}))
.pipe(rename("sprite.svg"))
.pipe(gulp.dest("build/img"));
});

Результат

Собранный svg-спрайт можно посмотреть перейдя по https://wwwpage.ru/img/sprite.svg. Да верно, на странице с иконками ничего не отображается и это правильное поведение, так как файл состоит только из набора символов <symbol>. Для того чтобы посмотреть svg код надо открыть дебагер (F12), либо нажать на комбинацию клавиш Ctrl+U.

HTML:
<a href='/workbook.html' aria-lable='ссылка на рабочую тетрадь верстальщика' class='link'>Ссылка на все статьи
<svg class='icon'>
<use xlink:href='/img/sprite.svg#icon-arrow-to-right' />
</svg>
</a>

CSS:
.link {
color: #2b2c25;
text-decoration: none;
}
.icon {
width: 1.5em;
height: 1.5em;
vertical-align: middle;
stroke: #2b2c25;
fill: none;
stroke-width: 1.5;
}

Контакт

mariia.belogubova@gmail.com

Информация, которую стоит указать в письме:

  • Имя, роль, контакты
  • Краткое описание проекта или список проблем.
  • Срок сдачи проекта
  • Бюджет проекта
  • Как вы обо мне узнали?

По любым вопросам пишите на почту

Написать письмо