Генерация SVG-спрайта по deps

Форум /

Не нашёл никакого освещения проблемы. Иногда (часто) хочется иметь доступ к свойствам иконки через css. Наиболее оптимальный способ — использование <use> (с инлайном общего SVG-спрайта в body или обращение к самому файлу через xlink:href). Т. к. при сборке страницы мы получаем .deps.js, нельзя ли использовать это для получения списка иконок, которые «соберутся» в один спрайт? Есть ли подобная технология для enb?

8 years ago

qfox

Очевидно, что это надо делать в рамках сборки спрайта. Чем ты собираешь спрайт(ы)? Если это ENB-технология, то теоретически можно получить список зависимостей для нужных блоков с помощью BEM SDK, сам ENB, в данный момент, вряд ли позволяет получить промежуточные результаты раскрытия зависимостей.

8 years ago

Realetive

это надо делать в рамках сборки спрайта.

Что это за рамки? Спрайты пока ничем не собираю, но хотелось, да, собирать неGulp'ом (использую enb).

Сейчас при генерации банда страницы создаются decl и deps-файлы. Можно ли как-то получить список блоков, имеющих, например, модификатор icon_svg-symbol и значение icon_symbol_*? Сами файлы icon_symbol_*.svg будут лежать на соответствующем уровне.

8 years ago

qfox

В рамках сборки — во время, ограниченное задачей сборки.

Спрайты можно собирать чем угодно, но кажется, что лучше не писать велосипед и поискать что-то готовое. Из ENB возвращается промис, так что там можно и потупить пока тулза всё соберет.

Деклы и депс файлы не подходят, кмк, потому что они собираются для бандла и в них ты никак не подлезешь, но можно использовать результат — раскрытые депсы с потерей информации кому они были нужны, если этот список чем-то будет полезен (вряд ли). Из этих файлов ты, конечно, можешь получить такие блоки, но я пока не понимаю как оно тебе поможет.

Можешь раскрыть мысль и расписать как ты хочешь хранить и как оно должно собираться в спрайт (по какому условию должно включаться)?

8 years ago

Realetive

Я рассуждал, что, повторяя принцип бандла («сборка только того, что используется в его декларации), хочется получить на его уровне файл svg-спрайта, как это происходит с css. Т. е. сами svg-файлы лежат на заведомо известном уровне (у меня в …/icon/_symbol/icon_symbol_*.svg). По задумке: указываем в bemjson, что эту иконку хотим получить в спрайте:

{
  block: 'icon',
  mods: {
    'svg-sprite': true,
    symbol: 'user'
  }
}

в bemhtml, соответственно, что-то вроде:

block('icon').mod('svg-sprite', true)(
  tag()('svg'),
  attrs()({ 'xmlns': 'http://www.w3.org/2000/svg' }),
  content()( function() {
    return {
      tag: 'use',
      attrs: {
        'xlink:href': 'page.svg#' + this.mods.symbol
      }
    }
  } )
)

UPD: А сборщик уже сам сгенерирует спрайт, к которому мы обращаемся «извне» с помощью атрибута xlink:href или инклюдим в страницу борщиком.

8 years ago

qfox

Тогда тебе действительно будет достаточно того, что есть в .deps.js бандла.

В enb ты можешь создать технологию с помощью buildFlow как здесь: https://github.com/enb/enb/blob/8619afae6df280373a54a933678fc0516d48e9a2/techs/file-merge.js#L28

В sources нужен будет указать '?.deps.js', оно приедет в builder, ты его возьмешь, распарсишь (например, с bem-decl или руками) и возьмешь только нужное (например, только icon), далее по этому списку ты найдешь где оно лежит (например, с помощью bem-fs-scheme или руками собирая пути) и останется только скормить файлы в тулзу сборщик спрайта.

На выходе из builder отдашь результат работы этой тулзы. profit!

p.s. Для ускорения отладки собирай точечно: enb make pages/your-page/your-page.sprite.svg, ?.sprite.svg пропиши в target: https://github.com/enb/enb/blob/8619afae6df280373a54a933678fc0516d48e9a2/techs/file-merge.js#L30

Чтобы оставлять комментарии, необходимо авторизоваться.