Дата публикации
8 Марта 2021
Дата изменения
10 Марта 2021
Уникальных просмотров
165

Оглавление

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' },
],

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 для установки этих иконок, можете подгрузить иконки как шрифт. Инструкция как это сделать — здесь.

Благодарность автору

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

Один из самых популярных способов поблагодарить автора, воспользоваться сервисом Яндекс.Деньги.

Время работы: 0,1566 s
Время запросов: 0,1566 s
Количество запросов: 28
Источник: cache