Fontawesome-user-agent NPM

fontawesome-user-agent

A simple, yet extensible, TypeScript (and JavaScript) library which tries to determine browser, os and platform Font Awesome icons from user-agent string (thanks to Bowser).

Installation

npm

npm install --save fontawesome-user-agent

yarn

yarn add fontawesome-user-agent

Usage

The most basic usage should look like this:

import { faUserAgent } from "faUserAgent";

const userAgent = "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/76.0.3809.100 Safari/537.36";

const icons = faUserAgent(userAgent);

// Content of icons:
{
  browser: {
    name: "chrome",
    style: "fab",
    html: "<i class=\"fab fa-chrome\"/>"
  },
  os: {
    name: "apple",
    style: "fab",
    html: "<i class=\"fab fa-apple\"/>"
  },
  platform: {
    name: "desktop",
    style: "fas",
    html: "<i class=\"fas fa-desktop\"/>"
  }
}

Simplified content of doc/demo.html:

<html>
    <head>
        <link rel="stylesheet" type="text/css" media="all" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css" />
    </head>
    <body>
        <p id="demo"></p>
        <script>
            var icons = FaUserAgent.faUserAgent(navigator.userAgent);
            html = icons.browser.html + icons.os.html + icons.platform.html;
            document.getElementById("demo").innerHTML = html;
        </script>
    </body>
</html>

Options

If you need to customize some options, you can use the optional options argument:

const icons = faUserAgent(userAgent, options => {
    options.prefix = "";
    options.icons.os.macOS = {
        name: "money-bill",
        style: "fas"
    }
    options.default.os = {
        name: "skull-crossbones",
        style: "solid"
    }
});

Available options:

FaUserAgentOptions

Name	Type	Description
`prefix`	`string`	Icon name prefix (e.g. `fa-`).
`icons.browser.<name>`	`FaUserAgentIconBase`	Icon for browser with name `<name>`.
`icons.os.<name>`	`FaUserAgentIconBase`	Icon for OS with name `<name>`.
`icons.platform.<name>`	`FaUserAgentIconBase`	Icon for platform with name `<name>`.
`default.browser`	`FaUserAgentIconBase`	Default browser icon to use when not found in icon set.
`default.os`	`FaUserAgentIconBase`	Default OS icon to use when not found in icon set.
`default.platform`	`FaUserAgentIconBase`	Default platform icon to use when not found in icon set.