Привет, коллеги! думаю, как бы прикрутить svg-иконки. у нас SPA без

Question

Привет, коллеги! думаю, как бы прикрутить svg-иконки. у нас SPA без

SSR, задачи вставлять через CSS нету, так что выбираю между разными способами инлайнинга в HTML

1) есть https://github.com/visualfanatic/vue-svg-loader - он просто читает svg-файл, прогоняет через SVGO и рендерит во vue-компонент
2) есть https://github.com/kisenka/svg-sprite-loader - собирает файлы в спрайт, возвращает объект с айдишником символа, который можно использовать в <use> - но есть возможность дописать "генератор рантайма", чтобы возвращал сразу компонент (есть пример для реакта https://github.com/kisenka/svg-sprite-loader/blob/master/examples/custom-runtime-generator/svg-to-icon-component-runtime-generator.js - для ву получилось сделать аналогичный за 20 минут)

То есть клиентский код у обоих может быть одинаковым:

<template>
<button>Hi, <Icon /></button>
</template>
<script>
let Icon = require("icon.svg")
export default {
components: {Icon}
}
</script>

в первом не нравится, что он превращает svg в render-функцию (нафига?)
во втором не нравится, что SVGO можно подключить только сбоку, соответственно каждый svg будет парситься дважды.

и, главное, не могу понять, есть ли у спрайта преимущества перед тупой вставкой в код, если мы не используем svg из CSS. вроде при тупой вставке на каждое использование иконки будет генериться N дом-узлов, а для спрайта - только 2 (<svg> и <use>). с другой стороны, use вроде как порождает кусок shadow dom, который кажется копируется из источника.
при этом при тупой вставке мы можем легко раскрашивать из CSS отдельные куски SVG, а для спрайта - только все целиком (или я не прав?)

короче, пока накидал свой лоадер на основе vue-svg-loader, он тупо передает содержимое svg строкой в функцию, которая уже создает из нее компонент, всталяя svg через domProps: {innerHTML: ...}, - вроде работает, но прежде чем начать его активно юзать, хочу посоветоваться с умными людьми =)

#frontend #javascript #programming #russian #vue.js

0

02.11.2017

2 ответов

33 просмотра

c01nd01r Eremenko

Я галпом собираю спрайт из символов, потом вебпак инлайнит его в index.html при сборке. Использую с помощью компонента, в который передаю id символа, где он вставляется в use

0

02.11.2017

Michael · Accepted Answer

Michael

я первое юзаю, доволен как слон. Код красивый.

0

02.11.2017

169 похожих чатов

Привет, коллеги! думаю, как бы прикрутить svg-иконки. у нас SPA без

2 ответов

Похожие вопросы