Всем привет! Сегодня мы рассмотрим один из вариантов интеграции svg иконок в наш фронтенд проект используя веб-компоненты. Основная идея компонента заключается в том, чтобы лениво подгружать в SVG спрайт иконки и переиспользовать уже загруженные иконки при необходимости. Сами иконки будем вставлять в разметке в виде <svg-icon name="arrow-angle-down"> нам понадобится всего сотня строк кода! Кому интересна реализация, прошу под кат!

Для тех, кому лень читать и хочется сразу посмотреть на весь листинг кода - прошу в репозиторий svg-icon. Для начала просто проговорим логику работы веб-компонента:

1. Получаем атрибут name у компонента и проверяем его наличие в уже существующем спрайте иконок на странице

2. Если такой иконки нету, то проверяем не загружается ли эта иконка в данный момент

3. Если такая иконка не загружается, загружаем ее и добавляем в спрайт.

Все достаточно просто. Для начала добавим в наш шаблон проекта пустой спрайт

<div id="SVG_SPRITE" style="display: none;">
  <svg><defs></defs></svg>
</div>

На этом этапе, можно сделать ремарку, что для еще большей оптимизации процесса, мы могли бы сюда отрендерить в defs сразу наши иконки, что позволит нам не подгружать их по сети уже на клиенте. Реализация этого остается на плечах разработчика, как пример могу предложить использовать vite vite-plugin-svg-prite.

Теперь рассмотрим саму реализацию по частям

class SVGIcon extends HTMLElement {
  //ID спрайт элемента
  #SPRITE_ID = 'SVG_SPRITE';

  //Публичный путь по которому будем загружать иконки
  #ICONS_PATH = '/icons';

  constructor() {
    super();
  }
  
  //Проверяем наличие атрибута name
  connectedCallback() {
    const iconName = this.getAttribute('name');
    if(iconName) {
      this.#loadIcon(iconName);
    } else {
      console.error('svg-icon undefined attr name');
    }
  }
  ...

Здесь все очень просто, мы выносим в приватные свойства ID элемента для спрайта и публичный путь к иконкам на сервере, при срабатывании хука connectedCallback проверяем атбрут name и запускаем приватный метод #loadIcon.

Теперь перейдем непосредственно к логике загрузки

...
/**
   * Загружаем или переиспользуем иконку
   * @param iconName name of icon
   */
  #loadIcon(iconName:string) {
    //Сохраняем ссылку на спрайт для сокращения обращений к DOM
    const spriteEl = document.getElementById(this.#SPRITE_ID);
    //Проверяем есть ли спрайт
    if(spriteEl === null) {
      return console.error('svg-icon undefined sprite element');
    }
    //Пытаемся выбрать иконку из спрайта
    let icon = spriteEl.querySelector(`[id="${iconName}.svg"]`);
    //Если иконки нету, загружаем ее
    if(!icon) {
      //Проверяем наличие кеш объекта для промисов
      if(!window[this.#SPRITE_ID]) {
        window[this.#SPRITE_ID] = {};
      }
      //Проверяем есть ли уже промис на загрузку иконки
      if(window[this.#SPRITE_ID][iconName]) {
        //Если есть, ожидаем его выполнения
        window[this.#SPRITE_ID][iconName].then((iconSvg:string) => {
          if(iconSvg) {
            this.#addIconInSprite(iconSvg, iconName, spriteEl);
            icon = spriteEl.querySelector(`[id="${iconName}.svg"]`);
          } else {
            console.error(`svg-icon ${iconName} response undefined`);
          }
        });
      } else {
        //Если промиса нету, запускаем fetch иконки
        window[this.#SPRITE_ID][iconName] = fetch(`${this.#ICONS_PATH}/${iconName}.svg`).then( async (response) => {
          const iconSvg = await response?.text();
          if(iconSvg) {
            this.#addIconInSprite(iconSvg, iconName, spriteEl);
            icon = spriteEl.querySelector(`[id="${iconName}.svg"]`);
          } else {
            console.error(`svg-icon ${iconName} response undefined`);
          }
          return iconSvg;
        }).catch(err => console.error('svg-icon fetch err', err));
      }
    //Если иконка есть, создаем свг елемент с ее содержимым
    } 
      const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg'),
        useElement = document.createElementNS('http://www.w3.org/2000/svg', 'use');
  
      useElement.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', `#${iconName}.svg`);
      svg.append(useElement);
      this.appendChild(svg);
    

  }
...

Логика загрузки иконки тоже весьма тривиальная, мы проверяем ее наличие в SVG спрайте, если иконка есть, дублируем ее в компонент, а если нет, то проверяем наличие промиса загрузки иконки чтобы не дублировать сетевые запросы, если промиса нету, то все-таки загружаем иконки по сети. Осталось рассмотреть последний метод, добавления иконки в спрайт

...
/**
   * Добавляем иконку в svg спрайт
   * @param svgContent svg text content from response
   * @param iconName name of icon
   */
  #addIconInSprite(svgContent:string, iconName:string, spriteEl:HTMLElement) {
    //Создаем template и добавляем в него полученный свг контент
    const tmp = document.createElement('template');
      tmp.innerHTML = svgContent;

    //Выделяем только svg елемент из полученного контента
    const tmpSvg = tmp.content.querySelector('svg'),
      symbol = document.createElementNS('http://www.w3.org/2000/svg', 'symbol');

    if(tmpSvg) {
      //Копируем аттрибуты из оригинального свг
      symbol.setAttribute('id', iconName + '.svg');

      if(null !== tmpSvg.getAttribute('viewBox')) {
        symbol.setAttribute('viewBox', tmpSvg.getAttribute('viewBox'));
      }
      if(null !== tmpSvg.getAttribute('fill')) {
        symbol.setAttribute('fill', tmpSvg.getAttribute('fill'));
      }
      symbol.innerHTML = tmpSvg.innerHTML;
    } else {
      console.error(`svg-icon not found svg content for ${iconName}`);
    }

    const spriteDefs = spriteEl.querySelector('defs');
    
    if(spriteDefs) {
      spriteDefs.append(symbol);
    }
  }

Некоторые могут спросить, зачем создавать template, выбирать из него SVG ведь мы и так загружаем SVG - ответ прост, SVG контент может содержать комментарии, а нас интересует только конкретно SVG элемент. Также ради оптимизации обращений к DOM функция принимает в аргументах ссылку на SVG спрайт который мы нашли в предыдущем методе #loadIcon. Также мы копируем атрибуты viewBox и fill для сохранения размера и цвета оригинальной иконки. Дальнейшее перекрашивание иконок и изменение размера нам доступно через CSS. Осталось лишь объявить компонент свг иконок

customElements.define('svg-icon', SVGIcon);

Вот и все, в оригинале всего 113 строк кода с комментариями в гите) Какие плюсы мы имеем в итоге?

1. Веб-компонент не привязан к сборщику, можно просто складировать иконки в папке проекта

2. Веб-компонент не привязан к фреймворку, будет одинаково хорошо дружить с vue\angular\svelte\react\etc.. любых версий

3. Из-за первых двух пунктов наш сборщик фронта работает чуточку быстрее.

4. Веб-компонент не имеет внешних зависимостей в целом.

Буду рад конструктивной критике, код ревью и предложениям по улучшению и оптимизации веб-компонента.