Как использовать SVG-иконки в Vue.js

Development | Amber | Комментировать запись

Давным-давно миром правили иконки на основе шрифтов, но с тех пор многое изменилось, и теперь все используют иконки SVG. Сегодня это лучший способ добавления иконок в ваше приложение. К сожалению, чтобы добавить их вручную, у вас уйдет много времени и сил. К счастью, существует плагин vue-svgicon, чья цель – упростить эту задачу.

Установка и настройка vue-svgicon

Конечно, vue-svgicon можно установить через Yarn или NPM:

# Yarn
$ yarn add vue-svgicon -D
# NPM
$ npm install vue-svgicon --save-dev

Затем нужно загрузить предпочитаемый шрифт Icon с отдельными значками SVG для каждого глифа. Здесь мы используем набор Material Design, один из самых больших доступных наборов, где вы найдете почти 2000 отдельных глифов. Он составлен согласно рекомендациям Google по дизайну, но поддерживается в основном сообществом.

Вставьте эти файлы .svg в папку svg-icons в корневой каталог вашего проекта (вне каталога src).

Теперь пакету vue-svgicon необходимо преобразовать все файлы svg-иконок в файлы .js, которые можно загружать по отдельности. Давайте добавим быстрый скрипт NPM, который сделает это за нас. Отредактируйте файл package.json, включив в него приведенный ниже сценарий:

{
  ...
  "scripts": {
    ...
    "generate-icons": "vsvg -s ./svg-icons -t ./src/compiled-icons"
  }
  ...
}

Затем введите команду:

npm run generate-icons

Она выведет скомпилированные значки в src/compiled-icons/[icon-name].js.

Применение vue-svgicon

Теперь нужно загрузить иконки в наше приложение. Добавьте плагин vue-svgicon в основной файл приложения Vue, src/main.js:

...
import VueSVGIcon from 'vue-svgicon'

Vue.use(VueSVGIcon)

...

Теперь можно загрузить значки в компоненты, импортируя используемый значок при помощи элемента <svgicon>. Бонус этого плагина: с его помощью мы можем практически без усилий загружать в приложение только те значки, которые нам нужны.

<template>
  <div>
    <span>Icon Demonstration:</span>
    <!-- You can tweak the width, height, and color of the icon. -->
    <svgicon icon="menu" width="22" height="18" color="#0f2"></svgicon>
  </div>
</template>

<script>
// If you really, really need to, you can import the whole iconset in your main.js file with `import ./compiled-icons`.
import './compiled-icons/menu';
</script>

В арсенале vue-svgicon есть еще несколько полезных трюков, узнать о них подробнее можно в официальном репозитории.