Как подключить svg в переменную Pug?

Чтобы подключить SVG изображение в переменную Pug, вам необходимо выполнить несколько шагов.

1. Создайте файл svg.js и определите функцию, которая будет возвращать SVG код в виде строки. Например, вот пример функции, которая возвращает SVG код иконки "home":

function getHomeIcon() {
  return `
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
      <path fill="currentColor" d="M12 4L3 12h3v8h12v-8h3zM14 ... "/>
    </svg>
  `;
}

2. В вашем файле Pug, используйте возможности интерполяции Pug для вызова функции getHomeIcon() и сохраните результат в переменной. Например:

- var homeIcon = getHomeIcon()

3. Далее, вы можете использовать переменную homeIcon в любом месте в вашем файле Pug, где требуется отобразить SVG изображение. Например:

div.my-icon
  | !{homeIcon}

Обратите внимание, что мы используем | перед !{homeIcon}, чтобы предотвратить экранирование HTML символов внутри переменной. Это позволяет корректно отобразить SVG код как часть HTML страницы.

Теперь вы можете повторить шаги 1-3 для любого другого SVG файла, который вы хотите подключить в переменную Pug. Просто создайте новую функцию, которая возвращает SVG код, вызовите эту функцию в файле Pug и отобразите результат в соответствующем месте вашего шаблона.