Недавно выяснилось, что Chrome обновился до 71 версии. Ничего сверхнового не вышло, в основном для разработчиков затронули изменения в DevTools.
Если вам интересно, можете узнать подробней тут или в видео ниже.
Это, конечно, всё хорошо, но именно из-за этой версии у многих пользователей на одном из моих проектов перестали работать SVG-спрайты. Самое интересное, что я две недели ничего не менял на этом сайте.
Как вы понимаете, на пустых областях должны были быть иконки. Позже оказалось, что это из-за обновления Chrome до 71 версии. Так как у меня была установлена 70 версия, все работало хорошо. В Safari, Firefox и Opera тоже всё работало нормально.
Почему в 71 версии не отображаются иконки, я так и не смог понять. В изменениях 71 версии ничего не говорится об SVG. На решение этого бага у меня ушло около 2 дней.
С помощью webpack'а я сохраняю все SVG и PNG иконки в отдельных файлах. Через PHP открываю файл /sprite.svg и вставляю во внутрь HTML сохранённый SVG-спрайт.
Как выяснилось, в 71 версии нельзя в значении атрибута xlink:href указывать идентификатор иконки без ссылки на сам SVG файл. Решение пришлось искать долго, но оказалось очень простым. Так как по адресу /sprite.svg у меня хранится спрайт с SVG иконками, то через React'овский компонент <Icon />, я вставляю иконкку с указанием ID иконки из спрайта.
Указав прямой путь к SVG-спрайту <use fill="xlink:href="/sprite.svg#plus-icon"></use>, все иконки снова заработали.