Estoy tratando de usar Font Awesome con Vue 3.
lo tengo en mi package.json
"dependencies": { "@fortawesome/fontawesome-svg-core": "^1.2.34", "@fortawesome/free-brands-svg-icons": "^5.15.2", "@fortawesome/free-solid-svg-icons": "^5.15.2", "@fortawesome/vue-fontawesome": "^3.0.0-3", } FontAwesome importado en main.js
import { createApp } from "vue"; import App from "./App.vue"; import router from "./router"; import store from "./store"; import { library } from "@fortawesome/fontawesome-svg-core"; import { faPhone } from "@fortawesome/free-solid-svg-icons/faAddressBook"; import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome"; library.add(faPhone); /* eslint-disable */ createApp(App) .use(store) .use(router) .component("font-awesome-icon", FontAwesomeIcon) .mount("#app") Y este componente interno en <template>
<font-awesome-icon :icon="['fas', 'faPhone']" /> Pero cuando lo uso en el componente, no sucede nada ... En el elemento, no se procesa nada, solo muestra un comentario HTML
<!---->
¿Cómo puedo solucionar este problema y comenzar a usar FontAwesome en cualquier componente?
Estos pasos lo hicieron funcionar para mí:
Instale prelease ( 3.0.0-4 ) de vue-fontawesome , que es compatible con Vue 3, y las dependencias de iconos:
npm i --save @fortawesome/vue-fontawesome@prerelease npm i --save @fortawesome/fontawesome-svg-core npm i --save @fortawesome/free-solid-svg-icons En main.js , seleccione los íconos de @fortawesome/free-solid-svg-icons para cargar:
import { library } from "@fortawesome/fontawesome-svg-core"; import { faPhone } from "@fortawesome/free-solid-svg-icons"; library.add(faPhone); Registre globalmente el componente font-awesome-icon :
import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome"; createApp(App) .component("font-awesome-icon", FontAwesomeIcon) .mount("#app"); En src/App.vue , use el componente como este (tenga en cuenta que el nombre del ícono es phone , no faPhone ):
<!-- explicit style --> <font-awesome-icon :icon="['fas', 'phone']" /> <!-- implicit style (fas is assumed) --> <font-awesome-icon icon="phone" />Tony19 es correcto, pero si quiere evitar saturar su archivo main.ts(js), puede hacer algo como esto:
Lo que puedes hacer es crear un archivo separado:
fontawesome-icons.ts
import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome"; import { library } from "@fortawesome/fontawesome-svg-core"; import { faPhone } from "@fortawesome/free-solid-svg-icons"; import { faUser } from "@fortawesome/free-solid-svg-icons"; import { faFlag } from "@fortawesome/free-solid-svg-icons"; library.add(faPhone); library.add(faUser); library.add(faFlag); export default FontAwesomeIcon; Luego en tu main.ts :
import { createApp } from "vue"; import App from "./App.vue"; import "./registerServiceWorker"; import "@/assets/css/main.scss"; import router from "./router"; import store from "./store"; import FontAwesomeIcon from "@/utilities/fontawesome"; createApp(App) .component("font-awesome-icon", FontAwesomeIcon) .use(store) .use(router) .mount("#app");para facilitar pero comprometer el tamaño y la velocidad del paquete . puedes importar todos los íconos a la vez
import { library } from '@fortawesome/fontawesome-svg-core' import { fas } from '@fortawesome/free-solid-svg-icons' import { far } from '@fortawesome/free-regular-svg-icons' import { fab } from '@fortawesome/free-brands-svg-icons' //Add all icons to the library so you can use it in your page library.add(fas, far, fab)fuente oficial fontawesome docs
Instalar en pc
npm i --save @fortawesome/fontawesome-svg-core npm i --save @fortawesome/free-solid-svg-icons npm i --save @fortawesome/free-regular-svg-icons npm i --save @fortawesome/free-brands-svg-iconsEn su main.ts
import { library, dom } from "@fortawesome/fontawesome-svg-core"; import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome"; import { fas } from '@fortawesome/free-solid-svg-icons' import { fab } from '@fortawesome/free-brands-svg-icons'; import { far } from '@fortawesome/free-regular-svg-icons'; library.add(fas, far, fab) dom.watch(); createApp(App) .component("font-awesome-icon", FontAwesomeIcon) .mount('#app')Para usar en archivos .vue
<i class="fa-solid fa-arrow-left"></i> <i class="fa-brands fa-facebook"></i>