Переопределить компонент Vuetify Icon - PullRequest
Новая
       87

Переопределить компонент Vuetify Icon

0 голосов
/ 31 мая 2019

Я создал компонент, который оборачивает компонент по умолчанию, чтобы он работал лучше с font-awesome.

Поскольку значки шрифта-awesome не квадратные, это приводит к противоречивым проблемам с размерами и выравниванием.Я решил эту проблему, создав оболочку, которая заставляет элемент быть квадратным, и используя «font-size: 100%;»он гарантирует, что значок неправильной формы содержится.

Проблема заключается в том, что все компоненты vuetify, имеющие "prepend-icon" / "append-icon", по-прежнему плохо отображаются при использовании font-awesome.

Я хотел бы знать, есть ли способ импортировать v-icon под другим именем, использовать его в моем компоненте-обертке, а затем определить мою обертку как правильный v-icon.Что теоретически разрешило бы выравнивание / размер всех компонентов vuetify с помощью значка prepend / append.

Кто-нибудь знает, как я могу переопределить такой компонент библиотеки?

Спасибо

1 Ответ

0 голосов
/ 01 июня 2019

Я сделал очень похожую вещь, когда мне пришлось заменить значки по умолчанию (в более старой версии Vuetify) на SVG по всему проекту, но при этом все еще хотел использовать компонент v-icon.

В итоге я создал пользовательский значок , называемый, скажем, SVGIcon.vue.Затем я определил некоторые имена значков, например, так: 

Vue.use(Vuetify, {
  icons: {
    // reusable custom icon
    'vuejs': {
      component: FontAwesomeIcon,
      props: {
        icon: ['fab', 'vuejs']
      }
    }
  }
})

(пример взят из документации Vuetify.)

Вы также можете передавать настраиваемые «реквизиты» каждому значкучто вы определяете.

Наконец, вы можете использовать его следующим образом:

<v-icon>$vuetify.icons.vuejs</v-icon> ( vuejs - имя иконы.)

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

...