Доброго всем. Первая публикация, прошу не особо...
Не стану растекаться мыслью по древу, пост - следствие поиска по запросам типа "как лучше вставить и анимировать SVG иконки", и подобным в том же ключе. Так как самыми релевантными ответами поиска не удовлетворён, решил написать свой, во-первых, чтобы услышать сообщество. Мало ли, возможно технология уже вовсю применяется в фреймворках, и на поиск все забили "всё и так слишком очевидно".
Во-вторых, сам до сих пор копаюсь в ванильном, поэтому, если старшие товарищи найдут сей вариант приемлемым, пусть пост останется как справка, вроде "а чё, так можно было?". Если же такая практика не применима по ряду пока неизученных мной причин, пост тоже пусть остаётся дополненный комментариями, как пример того "как не надо делать". В общем.
Решил упаковать спрайт в Web Components. Для примера взял отображение файловых иконок, за подопечных три распространённых файловых формата .docs, .xls, .pdf. Раз уж мне и так пришлось испытать муки отсутствия музы( вообще ни разу не художник), прошу отнестись с пониманием к внешнему виду конечного продукта. Упор был на простоту, контролируемость, компоновку. В том смысле, что косметика человеком с утончённым восприятием этого мира может быть применима отдельно.
Да, и ещё один аспект постарался обыграть - наличие общих свойств для всех иконок, коими выбрал подложку, и текст mime типа, и уникальные для каждой иконки элементы, ими выступили "брендовые" цвета и элементы. Так, выбор иконок файловых форматов для спрайта показался оптимальным.
Далее, в общем код(сокращённо, рабочий пример по ссылке), совсем немного к нему объяснений и ссылка на песочницу. И, само собой, ожидание комментариев.
customElements.define("wc-icon-file",
class WC_ICON_FILE extends HTMLElement {
constructor() {
super();
this.#preform = '';
this.#mime = '';
this.#unic = '';
}
connectedCallback() {
this.init();
this.innerHTML=this.#preform;
}
init() {
this._mime = this.getAttribute('data-mime');
let availableMime = {
xlsfile: `<g class="wc-icon-${this.#mime}">
<line style="stroke-width:3;stroke-linecap:butt;" x1="13" x2="17" y1="24" y2="24"/>
<line style="stroke-width:3;stroke-linecap:butt;" x1="18" x2="22" y1="24" y2="24"/>
// и т.д.
<text x="8" y="19" class="f-mime">.xls</text>
</g>`,
docfile: `<g class="wc-icon-${this.#mime}">
<line style="stroke-width:1.8;stroke-linecap:round;" x1="20" x2="24" y1="23" y2="23"/>
<line style="stroke-width:1.3;stroke-linecap:round;" x1="16" x2="30" y1="27" y2="27"/>
// и т.д.
<text x="8" y="19" class="f-mime">.doc</text>
</g>`,
pdffile: `<path class="wc-icon-${this.#mime}" d="m 21.963376,23.938571 // и т.д. />
<text x="8" y="19" class="f-mime">.pdf</text>`
}
this.#unic = availableMime[this.#mime];
this.#preform = `<svg class="wc-icon-file" viewBox="0 0 48 48">
<path class="${this.#mime}" d="M13.528 3.087 30 3l8 9-.316 28.075c-.035 3.151-1.09
4.143-3.716 4.11h-20.44 c-2.303.095-3.676-.718-3.716-4.11V7.197c-.03-2.459
1.504-4.198 3.716-4.11z"/>
${this.#unic}
</svg>`
};
});
let wcIconFile = document.createElement('wc-icon-file');
// export {wcIconFile} по необходимости
Сам компонент на странице объявляется как обычно:
<wc-icon-file data-mime="xlsfile"></wc-icon-file>
<wc-icon-file data-mime="docfile"></wc-icon-file>
<wc-icon-file data-mime="pdffile"></wc-icon-file>
Код прокомментирую на предмет того, что в init() пришлось соблюсти порядок объявления переменных. Для определения схожих классов с разными "модификаторами" сначала брался атрибут в компоненте. По нему же делалась выборка this.#unic впоследствии вставляемая в this.#preform . Стили здесь не привожу, отмечу лишь, что настройки :hover и анимации там вполне работают.
Благодарю, что уделили время.
