add svg-sprite

.gitignore

 build/*
 !build/readme.md
+src/blocks/sprite-svg--localstorage/img/*.svg
 
 .Saved/
 _arc/

TODO

-☐ Попробовать реализовать автоматизацию npm скриптами, а не галпом.
-☐ Вынести SVG-спрайты в отдельный компонент
 ☐ Добавить сексуальную стилизацию страницы библиотеки компонентов
 ☐ Сделать: таблицы — адаптивные таблицы — добавлять дата-атрибуты JS-ом
 ☐ Сделать: Селект с идентичными везде уголками
@@ -43,3 +41,4 @@
   ✔ Тестировать: копирование изображений при изменении файлов @done (28.02.2016 00:07)
 ✔ Добавить задачу оптимизации графики по указуемому адресу @done (29.02.2016 01:58)
 ✔ Добавить задачу публикации build/ в ветку gh-pages @done (29.02.2016 16:43)
+✔ Вынести SVG-спрайты в отдельный компонент @done (05.03.2016 00:19)

gulpfile.js

@@ -127,7 +127,7 @@ gulp.task('img:opt', function (callback) {
 
 // Сборка SVG-спрайта
 gulp.task('svgstore', function (callback) {
-  let spritePath = dirs.source + '/img/svg-sprite/';
+  let spritePath = dirs.source + '/blocks/sprite-svg--localstorage/svg/';
   if(fileExist(spritePath) !== false) {
     console.log('---------- Сборка SVG спрайта');
     return gulp.src(spritePath + '*.svg')
@@ -144,7 +144,8 @@ gulp.task('svgstore', function (callback) {
       .pipe(cheerio(function ($) {
         $('svg').attr('style',  'display:none');
       }))
-      .pipe(gulp.dest(dirs.build + '/img'));
+      .pipe(rename('sprite-svg--ls.svg'))
+      .pipe(gulp.dest(dirs.source + '/blocks/sprite-svg--localstorage/img'));
   }
   else {
     console.log('---------- Сборка SVG спрайта: нет папки с картинками');
@@ -202,7 +203,8 @@ gulp.task('clean', function () {
 // Сборка всего
 gulp.task('build', gulp.series(
   'clean',
-  gulp.parallel('less', 'copy:css', 'img', 'svgstore', 'js'),
+  'svgstore',
+  gulp.parallel('less', 'copy:css', 'img', 'js'),
   'html'
 ));
 

src/blocks/sprite-svg--localstorage/img/readme.md

+Папка, в которую генерируется спрайт.

src/blocks/sprite-svg--localstorage/readme.md

+# SVG-спрайт с использованием символов
+
+Из файлов папки `svg/` в папку `img/` будет сгенерирован файл спрайта `sprite-svg--ls.svg`. 
+
+Если less-файл импортирован, то в сборку будет взят `sprite-svg--localstorage.js` и изображения из `img/` будут скопированы в папку сборки, можно использовать спрайт.
+
+**ВНИМАНИЕ: При начале новой разработки на localhost не забудьте стереть запись inlineSVGdata из localStorage!**
+
+## Как это работает
+
+После загрузки страницы срабатывает JS, который проверяет: есть ли в localStorage запись с текстом спрайта. Если есть, текст спрайта вставляется после открывающего `body`, если нет, JS делает асинхронный запрос на сервер, получает файл спрайта, пишет его в localStorage и потом вставляет на страницу.
+
+В JS-файле есть переменная с ревизией спрайта. Если её поменять, произойдёт обновление спрайта в localStorage.
+
+Сам спрайт имеет вид:
+
+```svg
+<svg xmlns="http://www.w3.org/2000/svg" style="display:none">
+  <symbol id="icon-1" viewBox="0 0 30 30"><path fill="#444" d="..."/></symbol>
+  <symbol id="icon-2" viewBox="0 0 28 28"><path fill="#444" d="..."/></symbol>
+</svg>
+```
+
+Для вставки на страницу используйте конструкции `svg > use` со ссылками на `id` символа:
+
+```html
+<svg width="30" height="30"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-1"></use></svg>
+```
+
+Работает только в условиях работы localStorage! (При запросе страниц с сервера).
+
+
+[Ещё пример использования SVG-спрайта](http://codepen.io/nicothin/pen/qbmwNP?editors=1100) (вставка скрытого SVG со спрайтом происходит не JS-ом, а простой вставкой в разметку).

src/blocks/sprite-svg--localstorage/sprite-svg--localstorage.html

+<!--DEV
+
+Это пример использования спрайта:
+
+<svg width="30" height="30"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-1"></use></svg>
+
+-->

src/blocks/sprite-svg--localstorage/sprite-svg--localstorage.js

+;( function( window, document ) {
+  'use strict';
+
+  var file     = 'img/sprite-svg--ls.svg', // URL файла относительно страницы, на которой он используется (можно — абсолютный)
+      revision = 1;                        // Номер ревизии (сменить при обновлении спрайта)
+
+  if( !document.createElementNS || !document.createElementNS( 'http://www.w3.org/2000/svg', 'svg' ).createSVGRect ) {
+    return true;
+  }
+
+  var isLocalStorage = 'localStorage' in window && window[ 'localStorage' ] !== null,
+    request,
+    data,
+    insertIT = function() {
+      document.body.insertAdjacentHTML( 'afterbegin', data );
+    },
+    insert = function() {
+      if( document.body ) insertIT();
+      else document.addEventListener( 'DOMContentLoaded', insertIT );
+    };
+
+  if( isLocalStorage && localStorage.getItem( 'inlineSVGrev' ) == revision ) {
+    data = localStorage.getItem( 'inlineSVGdata' );
+    if( data ) {
+      insert();
+      return true;
+    }
+  }
+
+  try {
+    request = new XMLHttpRequest();
+    request.open( 'GET', file, true );
+    request.onload = function()
+    {
+      if( request.status >= 200 && request.status < 400 ) {
+        data = request.responseText;
+        insert();
+        if( isLocalStorage ) {
+          localStorage.setItem( 'inlineSVGdata',  data );
+          localStorage.setItem( 'inlineSVGrev',   revision );
+        }
+      }
+    }
+    request.send();
+  }
+  catch( e ){}
+
+}( window, document ) );

src/blocks/sprite-svg--localstorage/sprite-svg--localstorage.less

+// На самом деле, это не БЭМ-блок, но чтобы спрайт и JS-файл попали в сборку, в диспетчере подключений импортируется этот файл и он не пустой.

src/blocks/sprite-svg--localstorage/svg/readme.md

+Папка для исходников спрайта. Минимизация SVG происходит в процессе сборки спрайта, иметь в этой папке минимизированные изображения не обязательно.

src/img/svg-sprite/readme.md

-Из SVG-файлов этой папки будет собран спрайт — файл svg-sprite.svg в папке сборки, подпапке с изображениями.

src/less/style.less

@@ -19,3 +19,4 @@
 @import "./src/blocks/form/form.less";
 @import "./src/blocks/form/form--horizontal.less";
 @import "./src/blocks/thumb/thumb.less";
+@import "./src/blocks/sprite-svg--localstorage/sprite-svg--localstorage.less";