how to import fontAwsome icon into sideBar-menu-CodePudding

I am working in a Vue.js project

I am using fontAwsome library

there are my versions:

"@fortawesome/fontawesome-svg-core": "^1.2.34",
"@fortawesome/free-solid-svg-icons": "^5.15.2",
"@fortawesome/vue-fontawesome": "^2.0.2",

I did this at main.js:

import { library } from "@fortawesome/fontawesome-svg-core";
import { faChessKnight, faChessQueen, faChessKing, faChartLine } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";

library.add(faChessKing);

Vue.component("font-awesome-icon", FontAwesomeIcon);

and now I can add the icons this way:

<font-awesome-icon icon="chess-king" />

BUT/AND

I am using vue-sidebar-menu: vue-sidebar-menu and I would like to use the fontAwsomeIcons inside the vue-sidebar-menu structure:

href: '/',
title: 'Dashboard',
icon: I want to use icon from fontAwsome here

what is the correct syntax to use fontAwsome icons here?

PS: this is a console log of faChessKing:

Object { prefix: "fas", iconName: "chess-king", icon: (5) […] }
icon: Array(5) [ 448, 512, [], … ]
0: 448
1: 512
2: Array []
3: "f43f"
4: "M400 448H48a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h352a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16zm16-288H256v-48h40a8 8 0 0 0 8-8V56a8 8 0 0 0-8-8h-40V8a8 8 0 0 0-8-8h-48a8 8 0 0 0-8 8v40h-40a8 8 0 0 0-8 8v48a8 8 0 0 0 8 8h40v48H32a32 32 0 0 0-30.52 41.54L74.56 416h298.88l73.08-214.46A32 32 0 0 0 416 160z"
length: 5
<prototype>: Array []
iconName: "chess-king"
prefix: "fas"
<prototype>: Object { … }

EDIT: the vue.js version is "vue": "^2.6.12"

CodePudding user response：

Tried this out in a fresh Vue 3 project, and the following code sample should work for you. There were some slight changes between the two versions, which I guess was the issue.

First, import the icon

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

library.add(faChessKing)
Vue.component('font-awesome-icon', FontAwesomeIcon)

Then, to use

// menu
{
  href: '/',
  title: 'Dashboard',
  // Set icon as font-awesome
  icon: {
    element: 'font-awesome-icon',
    attributes: {
      // Then under icon.attributes, specify the icon to use
      icon: 'chess-king'
    }
  }
}

If you need to use slots for the toggle and dropdown icon, then this would correspond to:

<sidebar-menu>
  <font-awesome-icon slot="toggle-icon" icon="chess-king"></font-awesome-icon>
  <font-awesome-icon slot="dropdown-icon" icon="chess-king"></font-awesome-icon>
</sidebar-menu>

If you're only using a few icons, another option would be to simply download the assets you need, from FA. This saves you having to add all those Font-Awesome dependencies for such a simple feature. E.g.

icon: { element: 'span', class: 'my-icon', attributes: {}, text: ''}