I was lucky enough to grab one of the early bird releases of FontAwesome 5, so of course I was eager to use it in my next Vue project without having to fiddle around with my webpack setup.

Ever since I started developing Vue.js, I was looking for a neat and simple way to do rudimentary tasks without using third party components. There are several popular options out there, but why not create your own? It won’t take more than a couple of minutes, plus you can use your own classes and icons thus keeping your assets small.

First of all, I decided to register my <icon> component globally instead of creating a separate component since I want to use it anywhere without having to import or register components and mixins. Creating components globally can be done by using Vue.component(tagName, options) , like this:

Vue.component(‘icon’, {

props: {

name

}

})

Currently we’re only passing a single name prop to our icon, so ideally we would want to have something like this:

<icon name=”rocket”></icon>

To do this, let’s define our template:

Vue.component(‘icon’, {

props: {

name

},

template: `<svg><use :xlink:href="'static/icons/solid.svg#' + name"></use></svg>`

})

So far so good! If you’ve been playing around with the FontAwesome DIY kit, you should have noticed that there are several styles to chose from. Most of the time I’m OK with using light or regular , but adding a star-rating system for example will require having both a solid and light or regular style.

So how would we do that? We’ll pass another prop called weight (or whatever works for you).

Vue.component('icon', {

props: {

name,

weight: {

default: 'light'

}

},

template: `<svg><use :xlink:href="'static/icons/' + weight + '.svg#' + name"></use></svg>`

})

Feel free to replace the source folder — I’ve used /static for most of my assets. Also, notice the use of default for weight — this tells the component to prefer light styles instead. So both star icons would now look like this:

<icon name=”star”></icon>

<icon name=”star” weight="solid"></icon>

That’s it! You could now create a task to compile your SVG icons into a single sprite or use a tool like fontello to achieve the same.