vue-fa5-svg

A Vue component to easily use Font Awesome 5 icons from the spritesheet

The package contains a Vue component to easily display an icon from the Font Awesome 5 library.

This is how you it can be used:

<ul>
    <li>
        <button @click="openSettings"><icon>cogs</icon> Settings</button>
    </li>
    <li>
        <a href="https://twitter.com/SimonDepelchin">
            <icon weight="brands" name="twitter" class="mr-2" /> @SimonDepelchin
        </a>
    </li>
    <li>
        <icon class="text-green mr-2">solid/circle</icon> Online
    </li>
</ul>

Installation

You can install the package via yarn:

yarn add vue-fa5-svg

or npm:

npm install vue-fa5-svg --save

Then you need to download Font Awesome 5 and copy the spritesheets in your '/svg' folder of your static/public directory.

Usage

The most common use case is to register the component globally.

//in your app.js or similar file
import Vue from 'vue';
import {Icon} from 'vue-fa5-svg';

Vue.component('icon', Icon);

Alternatively you can do this to register the components:

import Icon from 'vue-fa5-svg';

Vue.use(Icon);

On your page you can now use html like this to render Font Awesome 5 Icons:

<icon>cogs</icon> Settings
<icon>regular/cogs</icon> Settings
<icon weight="regular" name="cogs"></icon> Settings

By default it will render the regular weight if you don't specify one.

CSS

By default the icon class is applied on all svgs. Here's my default CSS in my projects:

.icon {
    fill: currentColor;
    display: inline-block;
    font-size: inherit;
    height: 1em;
    overflow: visible;
    vertical-align: -.125em;
}

Credits

• Simon Depelchin
• All Contributors

This package is designed to be as simple to get started with as possible. If you want a more complete solution, I recommend using the official SVG with Javascript way.

License

The MIT License (MIT). Please see License File for more information.