Could not find one or more icon(s) in VueJS with TypeScript

Hi all,

I am quite new to Vuejs so my explanation may not be accurate or dumb but please understand me 😃

So I have followed the instruction and can see it’s going but only with one icon from the example but anything else keep saying ‘Could not find…’

inside main.ts

import { library } from '@fortawesome/fontawesome-svg-core';
import { faUserSecret } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
library.add(faUserSecret)
Vue.component('font-awesome-icon', FontAwesomeIcon);

inside my component,

<font-awesome-icon :icon="['fas', 'envelope-open-text']" />
<font-awesome-icon :icon="['fas', 'user-secret']" />

envelope is where I am getting an error. Based on those link Envelope User-Secret

For Envelope is

<i class="fas fa-envelope-open-text"></i>

and User-Secret is

<i class="fas fa-user-secret"></i>

So I thought I could put ‘fas’ as a prefix, then put ‘envelope-open-text’ without fa, just like what ‘user-secret’ is like. I am getting an ‘user-secret’ icon without an issue but everything else is not coming up.

Am I missing something?

[SnowNooDLe]

NVM, I just sorted out, just in case if someone else is getting the same issue, here is the solution in ReadME.md, saying put this inside main.js or main.ts

import { library } from '@fortawesome/fontawesome-svg-core';
import { faUserSecret } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
library.add(faUserSecret)
Vue.component('font-awesome-icon', FontAwesomeIcon);

You don’t really have to this unless you need those for globally, if you think you will need to use FontAwesome in multiple components, then just keep

import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
Vue.component('font-awesome-icon', FontAwesomeIcon);

then inside the componenet where you want to use,

<script lang="ts">
// this is must have
import { library } from '@fortawesome/fontawesome-svg-core';
// import { name of your icon in camelCase } from "@fortawesome/free-solid-svg-icons";
// For example, I want to use fa-enveloper-open-text, then it's faEnvelopeOpenText
import { faEnvelopeOpenText } from "@fortawesome/free-solid-svg-icons";
// Then add it to library
library.add(faEnvelopeOpenText)
</script>

// Finally I can use envelope-open-text like this inside template
<font-awesome-icon :icon="['fas', 'envelope-open-text']" />

[dohyung97022]

I had the exact same problem with vue 3.2.13

Solved it a different way.

main.ts

import {FontAwesomeIcon} from "@fortawesome/vue-fontawesome";
import {library} from "@fortawesome/fontawesome-svg-core";
import {fas} from "@fortawesome/free-solid-svg-icons";

library.add(fas)

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

and added this in the component with no imports.

<font-awesome-icon icon="trash" />

The problem was that the font-awesome website keeps giving
<font-awesome-icon icon="fa-solid fa-trash" /> this instead.