, 18 tweets, 2 min read
В опросе про иконки с большим отрывом лидирует вариант использовать inline иконки (с use тегом или без).
Расскажу о наших метаниях в выборе подхода: >>>
Если сейчас попытаться оценить решение, то
по экономии размера, самыми эффективными будут решения через filter или mask
По вариативности расцветок — самый простой вариант — использование спрайтов.
Inline вариант с use — также хорошо экономит размер, но хуже, чем filter или mask
Правильный выбор между этими решениями сделать сложно. Субъективно меня очень тянет к решениям с inline + use, filter или mask. Последние два варианта отпадают потому что IE11 и Android 4.4.
Если вы не поддерживаете эти браузеры — рекомендую посмотреть в сторону filter или mask для иконок. Делается очень просто и они лучше всего экономят память.
Выбираем из оставшегося.
Если рассматривать вариант просто inline без use. На моменте, когда вспоминается, что кроме React у тебя есть еще mustache и xslt и для этих двух шаблонизаторов нужно писать свои обертки или precompiled template понимаешь, что это будет очень высокий оверинжиниринг.
В любой задаче приходится искать баланс. Решение должно позволять очень просто вставить иконку, но не должно быть крайне сложным и запутанным. Иначе мы повышаем стоимость поддержки решения
Пробуем вариант с inline svg + use. Само решение простое: мы инлайним + используем use при первой вставке иконки на страницу, а при повторном используем только use. Как писал выше, для нас основная проблема была с пересечением id для иконок.
Окей, это решается именем иконки — нам же все равно компонент вызывать с уникальным именем. А чтобы названия не пересекались, можем класть иконки в одну папку.
Такое решение очень хорошо зайдет, особенно, если у вас single source of icons 😀.

Поэтому, если задаетесь подобным вопросом, то решение inline svg + use — рекомендую к рассмотрению :) Его просто внедрить и недорого поддерживать.
Но на большом сайте можно столкнуться с тем, что самих иконок большое количество. Есть иконки UIToolkit, иконки относящиеся к определенному сайту, специфические для определенных мест.
Если слить все эти иконки в одно место, то получится каша. Это не обязательно всегда плохо.
В итоге, получаем, что у нас есть потенциальное место для коллизий и если не сводить все иконки в одно место при этом подходе — риск увеличивается.
Остается вариант со спрайтами. Он дает чуть больший размер бандла по сравнению с inline + use и добавляет сложностей в анимации переходов (но потенциально они все равно возможны). В остальном есть и плюсы — цветные иконки делаются сильно проще, чем в других вариантах
Возможные состояния у нас генерируются на less.
Выглядит это так: миксину приходит набор состояний, например `.abstract-icon-kinds(default action primary secondary);`
Затем через рекурсию создаются модификаторы: `icon_action, icon_primary icon_secondary` и модификаторы для hover, focus по типу `icon_highlighted-action`
Специфические иконки для сайтов генерируются по аналогичному механизму. UIToolkit предоставляет миксин, который сгенерирует нужные классы.

Здесь вспоминается доклад Вадима:
Мораль этой истории?
У нас есть N подходов и ни одного идеального. И это просто вставить иконку на страницу.
Справедливости ради сказать, если у вас нет поддержки ie11 и прочего, то inline + use, filters или mask вам хорошо подойдут
Missing some Tweet in this thread? You can try to force a refresh.

Enjoying this thread?

Keep Current with jsunderhood

Profile picture

Stay in touch and get notified when new unrolls are available from this author!

Read all threads

This Thread may be Removed Anytime!

Twitter may remove this content at anytime, convert it as a PDF, save and print for later use!

Try unrolling a thread yourself!

how to unroll video

1) Follow Thread Reader App on Twitter so you can easily mention us!

2) Go to a Twitter thread (series of Tweets by the same owner) and mention us with a keyword "unroll" @threadreaderapp unroll

You can practice here first or read more on our help page!

Follow Us on Twitter!

Did Thread Reader help you today?

Support us! We are indie developers!


This site is made by just three indie developers on a laptop doing marketing, support and development! Read more about the story.

Become a Premium Member ($3.00/month or $30.00/year) and get exclusive features!

Become Premium

Too expensive? Make a small donation by buying us coffee ($5) or help with server cost ($10)

Donate via Paypal Become our Patreon

Thank you for your support!