NoneVuetifyjs : добавление только используемых иконок для сборки

Question

В настоящее время я создаю vuetifyjs-приложение со стандартными значками "Material Design Icons". В производственной сборке я использую только 2 иконки этого шрифта (используются чипами vuetify-component).

Как рекомендую я включил полный iconfont с

<link href="https://cdn.jsdelivr.net/npm/@mdi/font@3.x/css/materialdesignicons.min.css" rel="stylesheet">

Но производственная сборка вынуждает пользователя загружать почти 0,5 МБ данных только для 2 иконок. Есть ли способ:

• Включить только необходимые значки в CDN-запрос или
• Использовать Tree-Shaking, чтобы включить только основные иконки в основной файл CSS? (я использую parcel.js строитель)

Answer 1

Мы рекомендуем использовать @ mdi / js, где это возможно. Это обеспечивает модуль ES, который экспортирует путь SVG каждого значка в наборе значков и поддерживает древовидную структуру. Вы просто передаете строку значка в элемент пути SVG или в этом случае вы можете передать ее непосредственно v-icon если вы указали шрифт значка в конфигурации Vuetify: iconfont: 'mdiSvg',

Монтаж

npm install @mdi/js

использование

<template>
  <v-icon>{{ mdiCheck }}</v-icon>
</template>

<script>
  import { mdiCheck } from '@mdi/js'

  export default {
    data: () => ({
      mdiCheck,
    }),
  }
</script>

Подробнее об интеграции с Vuetify вы можете прочитать здесь: https://vuetifyjs.com/en/customization/icons