Устанавливаем Material Design Icons к проекту на Nuxt.js

Оглавление

• Установка иконок от Material Design в Nuxt.js
• Альтернативный вариант

Material Design содержит огромное количество хороших иконок — найти все икноки можно здесь. В этой статье я опишу шаги по подключению иконок от Material Design к проекту на Nuxt.js.

Установка иконок от Material Design в Nuxt.js

1. Для начала необходимо установить пакет vue-material-design-icons [npm] [Github]:

npm i vue-material-design-icons

2. Затем в проекте создаем файл plugins/vue-material-design-icons.js с содержимым:

import Vue from 'vue';
import 'vue-material-design-icons/styles.css';
import Account from 'vue-material-design-icons/Account.vue';
import Feather from 'vue-material-design-icons/Feather.vue';

export default function materialIcons() {
  Vue.component('AccountMdi', Account);
  Vue.component('FeatherMdi', Feather);
}

3. Добавляем в nuxt.config.js в массив plugins созданный .js файл:

plugins: [
  { src: '@/plugins/vue-material-design-icons', mode: 'client' },
],

4. Теперь мы можем использовать две добавленные иконки как Vue компонент:

<account-mdi />
<feather-mdi />

Добавлять иконки можно в файле vue-material-design-icons.js. Для этого на официальном сайте ищите название нужной вам иконки, импортируете ее (название иконки всегда будет с большой буквы) и регистрируете как компонент. Пример:

import Vue from 'vue';
import 'vue-material-design-icons/styles.css';
import Account from 'vue-material-design-icons/Account.vue';
import Feather from 'vue-material-design-icons/Feather.vue';
import Login from 'vue-material-design-icons/Login.vue';

export default function materialIcons() {
  Vue.component('AccountMdi', Account);
  Vue.component('FeatherMdi', Feather);
  Vue.component('LoginMdi', Login);
}

Альтернативный вариант

Если вы не хотите использовать сторонние пакеты и возможности vue.js для установки этих иконок, можете подгрузить иконки как шрифт. Инструкция как это сделать — здесь.