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