Import SVG/CSS from prop value in vuejs

[mjmnagy]

I have created my own component for icons to change/ add some features of fontawesome

I am using vue/nuxt(primarily nuxt).

I have followed the instructions for install both fortawesome-vue and pro version of fontawesome.

The problem with the fortawesome-vue is that we have a static import being added to a library

[https://fontawesome.com/how-to-use/on-the-web/referencing-icons/basic-use][1]

import Vue from 'vue'
import App from './App'
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)

As import is static i cannot pass a property into my icon component and have it imported as such i need to rely on require which is ok. Additionally, the imported variables are outside of the scope of vue. I can insert them into the lifecycle but this is not mentioned in the specs.

Also, as the icon property will be dynamic i want to have the entire library of icons added into the component and rely on tree-shaking to remove the unused icons.

my thought process would be

<template>
    <i v-bind:class="displayIcon"><slot></slot></i>
</template>
<script>
import * as icons from "./@fortawesome/fortawesome-pro/js/all.js"

..
props:{
    icon:{
        required: true
    }
},
data(){
    return {
        displayIcon:null
    }
}
created(){
    this.displayIcon = icons[this.icon]
   //and more desirable
  this.displayIcon = require('@fortawesome/fortawesome-pro/js/all.js')[this.icon] //-> this yields unable to locate 'src\style' at 'app-path\src\style'
}
</script>

Alternatively, if i can just import the svg directly would be IDEAL!!

TLDR Essentially, i have a wrapper component for the font-awesome icons. I want to be able to import a specific icon based on a single prop within vue. Ideally, i would just import the SVG directly and not bother with replacing i.

Any ideas? Thanks

[robmadole]

Hi @mjmnagy. So it sounds like the basics of what you are asking around being able to dynamically import icons. You have some other thoughts here too but I'll just focus on that piece.

You can do this with vue-fontawesome now:

<template>
  <div id="app">
    <font-awesome-icon :icon="appIcon" />
  </div>
</template>

<script>
import { faChessQueen } from '@fortawesome/free-solid-svg-icons'

export default {
  name: 'App',

  computed: {
    appIcon () {
      return faChessQueen
    }
  }
}
</script>

That passes the icon into the component instead of relying on the library construct.

So your next challenge is to dynamically import the icons. This is going to be dependent on a fetch or network call. So that's going to need something like Webpack or one of the other dynamic module/chunk loaders. That's a bit outside the scope of vue-fontawesome but I'd be willing to add some documentation for it if someone figures it out.

It has never been a priority for us since we rely on tree-shaking and hand-curate our bundle.