Get browser, os and platform Font Awesome icons from user-agent string.
MIT License
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).
npm install --save fontawesome-user-agent
yarn add fontawesome-user-agent
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>
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:
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. |
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.
See doc/default-options.md
for a list of the supported browsers, platforms and OS icons.
npm run build
npm run test
npm run coverage