Пишем веб-компонент для svg иконок

Всем привет! Сегодня мы рассмотрим один из вариантов интеграции 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. Веб-компонент не имеет внешних зависимостей в целом.

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