Иконки FontAwesome SVG с Vuetify - как использовать в v-icon / prepend-icon? - PullRequest
Новая
       41

Иконки FontAwesome SVG с Vuetify - как использовать в v-icon / prepend-icon?

1 голос
/ 17 марта 2019

Я новичок в Vue, не могу найти точный ответ, как использовать значки FA SVG в v-icon и prepend-icon. Если я использую: 

<font-awesome-icon :icon="dekstop" color="gray"></font-awesome-icon>

Отображаются значки, но как я могу использовать значки FA SVG в v-icon и prepend-icon? Пример: 

            <v-autocomplete v-model="replUser"
            :items="users" 
            color="accent white--text" 
            label="User"
            prepend-icon="dekstop></i>" // i can use material font icons here, but FA SVG not worked
            >

            </v-autocomplete>

my main.js: 

import Vue from 'vue'
import Vuetify from 'vuetify/lib'
// import colors from 'vuetify/es5/util/colors'
import './plugins/vuetify'
import App from './App.vue'
import i18n from './i18n'
import {
  library
} from '@fortawesome/fontawesome-svg-core'
import {
  FontAwesomeIcon
} from '@fortawesome/vue-fontawesome'
import {
  fas
} from '@fortawesome/free-solid-svg-icons'

Vue.component('font-awesome-icon', FontAwesomeIcon) // Register component globally
library.add(fas) // Include needed icons.

Vue.use(Vuetify, {
  iconfont: 'faSvg',
})
Vue.config.productionTip = false

new Vue({
  i18n,
  render: h => h(App)
}).$mount('#app')

Что я делаю не так?

Ответы [ 2 ]

2 голосов
/ 08 апреля 2019

Если вы хотите использовать иконки svg в v-icon/prepend-icon, вам нужно получить к ним доступ через объект $vuetify.icons. Любой другой текст в v-icon/prepend-icon будет интерпретироваться как класс webfont / css.

Но для использования $vuetify.icons объекта необходимо зарегистрировать пользовательские значки. Пример: 

import Vue from "vue";
import Vuetify from "vuetify";
import { library } from "@fortawesome/fontawesome-svg-core";
import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
import { faVuejs } from "@fortawesome/free-brands-svg-icons";

Vue.component("font-awesome-icon", FontAwesomeIcon); // Register component globally
library.add(faVuejs); // Include needed icons.

Vue.use(Vuetify, {
  icons: {
    vue: {
      component: FontAwesomeIcon,
      props: {
        icon: ["fab", "vuejs"]
      }
    }
  }
});

А теперь вы можете использовать значок vue-brand: 

<v-icon>$vuetify.icons.vue</v-icon>
<v-text-field prepend-icon="$vuetify.icons.vue"/>

Также, вы можете использовать без регистрации через font-awesome-icon: 

<font-awesome-icon :icon="['fab', 'vuejs']" />
<v-text-field>
    <font-awesome-icon :icon="['fab', 'vuejs']" slot="prepend"/>
</v-text-field>

Из коробки vuetify имеет предустановленные значки config , которые могут быть связаны с SVG: 

...
import { fas } from "@fortawesome/free-solid-svg-icons";
...
library.add(fas);
...
Vue.use(Vuetify, {
  iconfont: "faSvg"
});

Но для его использования вам следует снова вызвать $ vuetify.icons (vuetify, просто обернуть предустановку как компонент): 

<v-icon>$vuetify.icons.warning</v-icon>

Полный пример codesandbox

1 голос
/ 17 марта 2019

С Vuetify документация :

Font Awesome также поддерживается.Просто используйте имя иконки с префиксом.Обратите внимание, что вам все равно нужно включить значки Font Awesome в ваш проект.

Возможно, это вам поможет.Но без вашего примера кода я не могу быть уверен 

    <v-autocomplete v-model="replUser"
      :items="users" 
      color="accent white--text" 
      label="User"
      prepend-icon="fa-dekstop">
    </v-autocomplete>
...