Início / coding / Perguntas / 79564181
Accepted
Eloytxo
Asked: 2025-04-09 19:03:46 +0800 CST

Como posso usar o ícone FontAwesome do qrcode no VueJS 3?

  • 772

Sou novo no uso do VueJs e estou tentando algo tão simples quanto usar o ícone qrcode do FontAwesome, mas não consigo.

Este é meu package.json:

     "dependencies": {
    "@fortawesome/fontawesome-svg-core": "^6.7.2",
    "@fortawesome/free-brands-svg-icons": "^6.7.2",
    "@fortawesome/free-regular-svg-icons": "^6.7.2",
    "@fortawesome/free-solid-svg-icons": "^6.7.2",
    "@fortawesome/vue-fontawesome": "^3.0.8",
...}

Este é meu main.js:

    import { library } from '@fortawesome/fontawesome-svg-core'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
import { faUserSecret } from '@fortawesome/free-solid-svg-icons'

library.add(faUserSecret)

const app = createApp(App)
app.use(router)
app.use(i18n)
app.component('font-awesome-icon', FontAwesomeIcon)
app.mount('#app')

Este é meu componente:

<script setup>
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
</script>
<template>
  <button class="greenButtonColor">
    {{ $t('messages.dashboard.billScan') }}>
   <!-- <font-awesome-icon icon="fa-solid fa-user-secret" /> -->
    <font-awesome-icon icon="fa-solid fa-qrcode" />
  </button>
</template>

A linha comentada fa-user-secret funciona bem. Tentei todas as opções do Vue no link fornecido para o ícone, mas todos me dão esse erro no console e não sei como corrigi-lo e fazê-lo funcionar. Alguma sugestão?

Obrigado!

main.js:28 Could not find one or more icon(s) 
{prefix: 'fas', iconName: 'qrcode'}
vue.js

2 respostas

  1. instalar pacotes:npm install @fortawesome/fontawesome-svg-core @fortawesome/vue-fontawesome @fortawesome/free-solid-svg-icons

    no seu main.js:

    import { createApp } from 'vue';
import App from './App.vue';
import { library } from '@fortawesome/fontawesome-svg-core';
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
import { faQrcode } from '@fortawesome/free-solid-svg-icons';
// Add the QR Code icon to the library
library.add(faQrcode);
const app = createApp(App);
app.component('font-awesome-icon', FontAwesomeIcon);
app.mount('#app');

    Modelo App.vue:

    <template>
  <div>
    <font-awesome-icon icon="qrcode" />
  </div>
</template>

<script>
export default {
  name: 'MyComponent',
};
</script>
    • 1
  2. Best Answer

    Está faltando faQrcodeno seu main.js. Basta adicioná-lo assim:

    js

    importar{ faUserSecret, faQrcode } from '@fortawesome/free-solid-svg-icons'; library.add(faUserSecret, faQrcode);

    Agora, seu componente funcionará:

    vue

    <font-awesome-icon icon="fa-solid fa-qrcode" />

    • 1

relate perguntas