Abr@X@bra.ru
Использование svg в vue.js без плагинов
Использование svg в vue.js без плагинов

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

27.11.2018
39

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



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


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

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

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

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

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

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

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


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


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

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



Источник: golos

vue, svg
Читайте также:
Vue.js + GSAP =  Крутая анимация

Vue.js + GSAP =  Крутая анимация

Vue.js - это структура Javascript, которая одновременно является мощной и простой. С помощью Vue CLI мы можем быстро вне...
Читать
CSS: цветные нумерации списков ul ol -  EN

CSS: цветные нумерации списков ul ol - EN

Ever wanted to make a list with the bullets a different color than the text, like in this example?
Читать
Vue.js 2 + Firebase

Vue.js 2 + Firebase

Создание веб-приложений в режиме реального времени с использованием Vue.js 2 и Firebase.
Читать