В прошлом мы обращались к иконочным шрифтам, а в последнее время — к спрайтам SVG. Github сделал отличный репортаж об их преобразовании из иконочных шрифтов и о том, как они пришли к решению встроить все свои svg по всему сайту.
Сегодня на css-tricks Сара Драснер написала замечательную статью о создании системы иконок SVG с помощью React. Ее метод также встраивает все svg прямо на страницу. В одном из комментариев к статье указывалось на тот факт, что если бы у вас был список, возможно, из тысяч элементов, каждый из которых использовал бы разные значки для каждого элемента списка, вы бы вывели много одинаковой разметки.
Тем не менее, мне понравилась идея иметь компоненты React, которые генерируют ваши значки svg из небольшого набора параметров (реквизитов). Поэтому я надеялся создать сервер svg, который использует компоненты React для вывода файлов svg в браузер. Это позволило бы напрямую связываться с использованием тегов ‹img› и, таким образом, получать выгоду от кэширования, а также позволяло бы позиционировать с точки зрения dom, поскольку он будет рассматриваться как отдельный элемент.
Используя рендеринг на стороне сервера из React, было довольно легко собрать быстрый сервер. У меня есть один, работающий сейчас на cloud9 для демонстрационных целей:
"Рабочее пространство"
Я добавил возможность также добавлять параметры строки запроса к URL-адресу, который передается в качестве реквизита компоненту React (ширина, высота).
