При работе над новой темой оформления для Jekyll, понадобилось реализовать возможность динамического включения SVG иконок в шаблоны оформления страниц, вместо копирования и вставки их SVG кода вручную. Предлагаю своё решение.

Для примера буду использовать набор иконок из Font Awesome 5.14.0. Так как иконки предполагается включать только инлайн в HTML код страницы, содержимое архива удобно извлечь в директорию _includes. Пути к файлам иконок будут начинаться с префикса fontawesome-free-5.14.0-web/svgs/.

Теперь включить инлайн SVG иконку для ВКонтакте можно в любое место шаблона оформления страницы:

{% include fontawesome-free-5.14.0-web/svgs/brands/vk.svg %}

Этого может быть достаточно, но можно пойти дальше. Например, мне надо, чтобы ко всем включаемым иконкам добавлялось свойство display="none", чтобы иконки не отображались браузером без подключённой таблицы стилей. Кроме того, я не хочу каждый раз использовать полный путь к SVG файлу, потому что в будущем, при обновлении версии Font Awesome, придётся исправлять пути во всех файлах шаблонов. Так что приведённый выше пример включения иконки мне не подходит.

Для обхода ограничений создаю новый файл _includes/icon.svg со следующим Liquid кодом.

{%- assign prefix_path = 'fontawesome-free-5.14.0-web/svgs/' -%}
{%- assign svg_path = include.icon | remove: '.svg' | prepend: prefix_path | append: '.svg' -%}
{%- if include.display == true -%}
    {%- include {{ svg_path }} -%}
{%- else -%}
    {%- capture svg %}{% include {{ svg_path }} %}{% endcapture -%}
    {{- svg | replace: '<svg ', '<svg display="none" ' -}}
{%- endif -%}

Теперь включение той же самой иконки для ВКонтакте выполняется с использованием созданного файла icon.svg так:

{% include icon.svg icon='brands/vk.svg' %}

В результате в HTML код страницы включается иконка brands/vk.svg, заданная в параметре icon, а в SVG коде иконки устанавливается свойство display="none". При передаче значения параметру icon расширение .svg для файлов иконок можно опустить.

Для включения отображения иконок на странице в браузере, в таблице стилей для элементов svg изменяется свойство display:

svg {
    display: inline-block;
}

Принудительной установкой свойства display="none" в файле icon.svg управляет параметр display: display=true отключает установку свойства display="none". Однако это не влияет на свойство display="none", заданное непосредственно в SVG коде в файле иконки.

Если иконка задана в заголовке страницы, например:

---
title: Астронавт
user_icon: solid/user-astronaut.svg
---

Включить её в страницу, без принудительной установки свойства display="none", можно так:

{% include icon.svg icon=page.user_icon display=true %}

Меняйте код в файле icon.svg под свои нужды и Jekyll автоматически встроит код SVG иконок в HTML код страниц вашего сайта.