❤
npm
Sign UpSign In

fontawesome-user-agent
TypeScript icon, indicating that this package has built-in type declarations

0.2.1 • Public • Published

fontawesome-user-agent

NPM Version Build Status Greenkeeper badge Coverage Status

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.

FaUserAgentIconBase

Name Type Description
name string Font Awesome icon class name.
style string Font Awesome icon Style Prefix class name.

See Font Awesome Basic Use for more information about how to use these properties.

Supported Icons

See doc/default-options.md for a list of the supported browsers, platforms and OS icons.

Develop

  • build: npm run build
  • test: npm run test
  • code coverage: npm run coverage

License

MIT

Readme

Keywords

Package Sidebar

Install

npm i fontawesome-user-agent

Repository

github.com/bbenoist/fontawesome-user-agent

Homepage

github.com/bbenoist/fontawesome-user-agent

Weekly Downloads

138

Version

0.2.1

License

MIT

Unpacked Size

81.2 kB

Total Files

34

Last publish

Collaborators

  • _bbenoist_
Try on RunKit
Report malware