Использование svg в vue.js без плагинов

Крутизну SVG сложно преувеличить, однако с ее использованием связаны определенные трудности.
Как известно, векторные изображения можно использовать как в свойстве background-image, так и вставлять в разметку. Однако в первом случае вы не можете управлять цветом иконки, например, при наведении курсора. Если же создать две одинаковых иконки разного цвета, при первом наведении после загрузки страницы иконка будет мерцать:

.icon {
   background-image: url("icon-black.svg");
}
.icon:hover {
   background-image: url("icon-blue.svg");
}

При использовании png эта проблема решается созданием спрайтов. Сборка же векторного спрайта - дело гораздо более геморройное, поэтому чаще при работе с векторной графикой пользуются другими способами.
Чтобы управлять цветом SVG через стили, код векторной картинки нужно включить в разметку:

<a href="#" class="icon">
   <svg>
       ...
   </svg>
</a>

Проблема в том, что код SVG может быть чрезвычайно громоздким, затрудняя работу с разметкой, поэтому для удобного их применения существует несколько способов.

В этой статье речь пойдет об использовании векторной графики в шаблонах vue.js. Мне очень понравился плагин vue-svgicon, однако мне не удалось заставить его работать в ИЕ11. Перепробовав несколько других плагинов, я нашла изумительное по своей простоте решение.

Итак, требования к были следующие: ИЕ11+, управление цветом SVG-иконок из стилей, чистый опрятный код.

Для начала создадим шаблон, назовем его, например, Svg.vue и поместим в него все необходимые нам иконки. Поскольку vue требует, чтобы внутри тега <template> был только один прямой потомок, все наши SVG обернем, например, в <span>. Каждому SVG зададим имя, которое позволит обращаться к нужному изображению: v-if="name=='your-icon-name'"

Все вместе это будет выглядеть так:

<template>
   <span>
       <svg v-if="name=='svg-search'">
           код первой иконки
       </svg>
       <svg v-if="name=='svg-password'">
           код второй иконки
       </svg>
   </span>
</template>
<script>
   export default {
       props: {
           name: {
               type: String,
               required: true
           }
       }
   }
</script>

Внимание! В примере я сознательно пропускаю некоторые обязательные и необязательные атрибуты тега <svg>, но вы про них не забывайте: viewBox, xmlns, ширина-высота и так далее.

Теперь мы можем использовать наши иконки. Для вставки SVG в шаблон используем код:

<svg-icon name="svg-search" />

Что скомпилируется в следующую конструкцию:

<span>
   <svg>
       код первой иконки
   </svg>
</span>

Внизу шаблона обязательно укажем, откуда что взялось:

<script>
   import svgIcon from '../../svg/Svg'; //путь к Svg.vue
   export default {
       components: {
           'svg-icon': svgIcon
       }
   }
</script>

После этого мы можем делать с нашей иконкой все, что угодно и что позволяет CSS.