Как компактно вставлять svg с возможностью изменения его свойства?

Для компактной вставки SVG с возможностью изменения его свойств в Vue.js можно воспользоваться следующим подходом:

1. Использование компонента <component>: Вы можете создать компонент, который будет динамически загружать SVG и применять к нему свойства. Например, создайте компонент SvgIcon:

<template>
  <component :is="icon" :fill="fill" :width="width" :height="height" />
</template>

<script>
export default {
  props: {
    icon: {
      type: String,
      required: true
    },
    fill: {
      type: String,
      default: 'currentColor'
    },
    width: {
      type: [Number, String],
      default: 24
    },
    height: {
      type: [Number, String],
      default: 24
    }
  }
};
</script>

2. Добавление свойств в SVG файл: Чтобы иметь возможность изменять свойства SVG (например, цвет), добавьте соответствующие атрибуты в самом SVG файле:

<svg width="24" height="24" fill="currentColor">
  <!-- ваше содержимое SVG -->
</svg>

3. Использование компонента в шаблоне:

<template>
  <SvgIcon icon="path_to_your_svg_file.svg" fill="red" width="32" height="32" />
</template>

<script>
import SvgIcon from '@/components/SvgIcon.vue';

export default {
  components: {
    SvgIcon
  }
};
</script>

Теперь, при использовании компонента SvgIcon, вы сможете динамически изменять такие свойства, как цвет, ширина и высота SVG. Этот подход позволяет вам компактно вставлять SVG с возможностью изменения его свойств в Vue.js.