Skip to content

Instantly share code, notes, and snippets.

@bartrail
Last active July 11, 2018 15:21
Show Gist options
  • Save bartrail/2795d368f51ee7d3eb2ab15ed29d988d to your computer and use it in GitHub Desktop.
Save bartrail/2795d368f51ee7d3eb2ab15ed29d988d to your computer and use it in GitHub Desktop.
FontAwesome 5.0 wrapper component for a default prefix
import Vue from 'vue';
import {default as fa} from 'fontawesome.vue';
(function(window) {
"use strict";
// register our custom FontAwesome component globally
Vue.component('fa', fa);
new Vue({
el : "#app",
template : '<layout></layout>',
data : {}
})
})(window);
<template>
<fa-icon :icon="[prefix, icon]"></fa-icon>
</template>
<script>
import {library} from '@fortawesome/fontawesome-svg-core';
import {FontAwesomeIcon} from '@fortawesome/vue-fontawesome';
// using 'light' as default style
const defaultIcon = 'fal';
// we need to import all styles manually from their packages.
// ATTENTION: you won't find `faCoffee` in `pro-solid-svg-icons`
// have a look at the filters to the left: https://fontawesome.com/icons?d=gallery&q=coffee&s=light,regular,solid
import {faCoffee as coffeeSolid} from '@fortawesome/free-solid-svg-icons';
import {faCoffee as coffeeRegular} from '@fortawesome/pro-regular-svg-icons';
import {faCoffee as coffeeLight} from '@fortawesome/pro-light-svg-icons';
library.add(
coffeeSolid,
coffeeRegular,
coffeeLight
);
export default {
props : {
icon : {
type : String, required : true
},
prefix : {
type : String, required : false, default : defaultIcon
}
},
name : "fa",
components : {
'fa-icon' : FontAwesomeIcon
}
};
</script>
<template>
<div>
<fa icon="coffee"></fa> <!-- shows 'light' as this is set as default -->
<fa icon="coffee" prefix="fas"></fa> <!-- shows 'solid' -->
<fa icon="coffee" prefix="far"></fa> <!-- shows 'regular' -->
</div>
</template>
<script>
export default {
name : "index"
};
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment