FontAwesome SVG iconos con Vuetify: ¿cómo usarlos dentro de v-icon / prepend-icon?

Solución:

Si desea utilizar iconos svg en v-icon/prepend-icon, entonces debes acceder a ellos a través de $vuetify.icons objeto. Cualquier otro texto en el v-icon/prepend-icon se interpretará como clase webfont / css.

Pero para usar $vuetify.icons objeto debe registrar iconos personalizados. Ejemplo:

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"]
      }
    }
  }
});

Y ahora puede usar el ícono de la marca vue:

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

Además, puede usar sin registrarse a través de font-awesome-icon:

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

Fuera de la caja, vuetify tiene una configuración preestablecida de iconos que se puede asociar con SVG:

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

Pero para usarlo, debe llamar a $ vuetify.icons nuevamente (vuetify simplemente envuelva el preset como componente):

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

Códigos y caja de ejemplo completos

---

---

Utiliza Nuestro Buscador