jarvelov
commented
5 years ago I don't know what the official stance is on this but I got it working by wrapping the FontAwesomeIcon component in my own component. It supports icons using both String and Array as the icon prop.
It has no real error handling other than that it shows the spinner-thirdicon while loading the icon and the exclamationicon if it fails to load.
These are the versions I'm using
"@fortawesome/fontawesome-svg-core": "^1.2.17",
"@fortawesome/free-solid-svg-icons": "^5.8.1",
"@fortawesome/vue-fontawesome": "^0.1.6",This is the component, place it in a .vue file and use it as you would use the FontAwesomeIconcomponent.
<script>
import { library } from '@fortawesome/fontawesome-svg-core';
import { faExclamation, faSpinnerThird } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
import { camelCase } from 'lodash';
library.add([faExclamation, faSpinnerThird]);
export default {
name: 'font-awesome-dynamic-icon',
props: FontAwesomeIcon.props,
data() {
return {
fetched: null,
fetchedIcon: null,
iconTypes: {
fas: 'solid',
far: 'regular',
fal: 'light',
},
};
},
computed: {
iconDefinition() {
if (this.fetchedIcon) {
return this.fetchedIcon;
}
if (library.definitions[this.iconPrefix] && library.definitions[this.iconPrefix][this.iconName]) {
return {
icon: library.definitions[this.iconPrefix][this.iconName],
iconName: this.iconName,
prefix: this.iconPrefix,
};
}
return null;
},
iconFileName() {
return camelCase(`fa-${this.iconName}`);
},
iconName() {
return Array.isArray(this.icon) ? this.icon[1] : this.icon;
},
iconPrefix() {
return Array.isArray(this.icon) ? this.icon[0] : 'fas';
},
iconType() {
return this.iconTypes[this.iconPrefix];
},
},
methods: {
fetchIcon() {
this.fetched = false;
return import(/* webpackChunkName: "fonts/[request]" */
`@fortawesome/free-${this.iconType}-svg-icons/${this.iconFileName}.js`)
.then((response) => {
this.fetched = true;
if (response && response.definition) {
this.fetchedIcon = response.definition;
library.add(response.definition);
}
})
.catch(() => {
this.fetched = true;
});
},
},
created() {
if (!this.iconDefinition) {
this.fetchIcon();
}
},
watch: {
icon() {
if (!this.iconDefinition) {
this.fetchIcon();
}
},
},
render() {
if (!this.iconDefinition) {
if (!this.fetched) {
return this.$createElement(FontAwesomeIcon, {
props: {
spin: true,
icon: faSpinnerThird,
},
});
}
return this.$createElement(FontAwesomeIcon, {
props: {
icon: faExclamation,
},
});
}
return this.$createElement(FontAwesomeIcon, {
props: {
...this.$options.propsData,
icon: this.iconDefinition,
},
});
},
};
</script>
WvanDam
Zyles
marceloavf
robmadole
scadergit
dannywp
klausXR
stemeda
nikhilkhandelwal18
I'm trying to dynamically import icons using
import(), but am running into some issues. Has anyone done this or is this not supported?Below is what I've tried, with varying results. I'm using a Pro icon here and have everything correctly set up to use the Pro packages (Pro icons imported via the static
importwork just fine). This code is in mymain.js, before I bootstrap Vue.First I tried:
which results in:
Next I tried:
which results in the icon showing up on the screen, but I see this in my console:
If anyone has some insights into what's going on and/or how to get it working (w/o errors in the console), I'd appreciate it!