CSS правило mask-image поможет наложить фоновую картинку на SVG изображение, позволяя создавать красивые эффекты на векторе

#css #tip #svg

Иконки флагов стран в SVG формате - https://flagicons.lipis.dev
Можно выбрать необходимые, но если нужны все, то png формат (sprite) может быть значительно оптимальней.

#flag #svg #lib

SVG тоже могут иметь реактивные свойства

<template>
  <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
    <circle cx="50" cy="50" r="50" :fill="color" />
  </svg>
</template>

<script setup lang="ts">
defineProps<{
  color: string
}>();
</script>

#tip #svg

currentColor - это значение, которое принимает значение любого цвета, установленного в данный момент для этого селектора, независимо от того, установлен ли он неявно или унаследован.

Пример:

.btn {
  padding: 0.5em 1.25em;
  text-transform: uppercase;
  text-decoration: none;
  background: white;
  color: limegreen;
  border: 1px solid currentColor;
  // border будет тоже цвета limegreen
}

currentColor часто применяется в svg иконках, когда надо прокинуть установленный на элементе её содержащем цвет, на саму иконку. В этом случае в svg используют color: currrentColor. В распространенных icon packs это обычно так.

Если у svg иконки есть свойства и color, и fill, то как минимум одно из них прокидывать в обертку придется пропсами, как в данном примере

#tip #css #svg

На этом сайте можно создать анимированный SVG для скелетона

skeletonreact.com

#svg

В проекте число иконок перевалило за 150, а их объем в JS бандле занимает пятую часть.

Поэтому задумался, как оптимизировать это дело. Стандартных решений не нашел. Решил вынести все иконки для кэширования через service worker. SVG спрайт слишком тяжелый для клиента, поэтому засунул всё в JSON, который считываю в JS и делаю Map по HTML кодам иконок.

На первой загрузке сайта получается лишний запрос. Потом норм.

Есть что-то более оптимальное?

#svg #optimization