joshuahylands/icons-ui

icons-ui is a package that allows multiple icon packages to be used in multiple frontend frameworks.

icons-ui

icons-ui is a package that allows multiple icon packages to be used in multiple frontend frameworks.

Installation

To install icons-ui you will need npm, a Javascript package manager for Node.js.

Use the npm install command to install icons-ui:

npm install icons-ui

Usage

This package can be used with both Javascript and Typescript.

Every Icon element is rendered as an HTML <i> tag and has a class of icons-ui.

Before using this package please read the Usage and Terms of Use for the icon package you intend to use.

Icon Packages

Icon Package	Supported	Version
Fontawesome	✅	5.8.2
Material Design Icons	✅
Ionicons	✅	4.5.5
Bootstrap Glyphicons	✅

Frameworks

Framework	Supported	IconsUI Code
React	✅	react
Preact	✅	preact
Vue	✅	vue
AngularJS	✅	angularjs
Javascript	✅	js

Icon Class

Description

The Icon Class is a React Component, a Vue Component, an AngularJS Component or a function that creates a HTML element in Javascript.

Attributes/Props

• icon : An Icon from the FontAwesomeIcons, MaterialIcons or IonIcons objects - required
• size : number. Sets the CSS font size property - optional
• onClick : Function. Callback function that takes an event attribute - optional
• href : string. Adds a link to the icon - optional
• target : string. Specifies where to open the link. Options listed below - optional
  • _blank - Opens in new tab - default
  • _self - Opens in same tab
• className : string - Sets the HTML class attribute - optional
• id : string - Sets the HTML id attribute - optional

Icon Objects

Description

Objects that store all the data about each icon in each icon package.

These icon objects are FontAwesomeIcons, MaterialIcons and IonIcons.

Usage

To use these objects you first need to call them. You will only need to call an object once.

For example, if I wanted to use the FontAwesomeIcons object I would need to first call it like a function:

FontAwesomeIcons(); // Call the object to load all it's data.

Now FontAwesomeIcons will be loaded with all the icons data.

Examples

All Examples below will produde the following output:

React

import { Icon, FontAwesomeIcons, MaterialIcons } from 'icons-ui';

FontAwesomeIcons();
MaterialIcons();

ReactDOM.render(
    <div>
        <Icon icon={ FontAwesomeIcons.solid.check }/>
        <Icon icon={ MaterialIcons.filled.games } size={ 36 }/>
    </div>,
    document.getElementById('app')
);

Preact

import { Icon, FontAwesomeIcons, MaterialIcons } from 'icons-ui';

render((
    <div>
        <Icon icon={ FontAwesomeIcons.solid.check }/>
        <Icon icon={ MaterialIcons.filled.games } size={ 36 }/>
    </div>
), document.body);

Vue

import { Icon, FontAwesomeIcons, MaterialIcons } from 'icons-ui';

FontAwesomeIcons();
MaterialIcons();

new Vue({
    el: '#app',
    components: {
        Icon
    },
    data: {
        checkIcon: FontAwesomeIcons.solid.check,
        gamesIcon: MaterialIcons.filled.games,
        gamesSize: 36
    }
});

<icon :icon="checkIcon"></icon>
<icon :icon="gamesIcon" :size="gamesSize"></icon>

AngularJS

const { Icon, MaterialIcons, FontAwesomeIcons } = require('icons-ui');

MaterialIcons();
FontAwesomeIcons();

angular.module('app', [ Icon ]);

angular.module('app').controller('AppCtrl', function AppCtrl() {
    this.checkIcon = FontAwesomeIcons.solid.check;
    this.gamesIcon = MaterialIcons.filled.games;
    this.gamesSize = 36;
});

angular.bootstrap(document.getElementById('app'), [ 'app' ]);

<div id="app" ng-controller="AppCtrl as ctrl">
    <icon icon="ctrl.checkIcon"></icon>
    <icon icon="ctrl.gamesIcon" size="ctrl.gamesSize"></icon>
</div>

Javascript

const { Icon, FontAwesomeIcons, MaterialIcons } = require('icons-ui');

FontAwesomeIcons();
MaterialIcons();

const checkIcon = Icon({ icon: FontAwesomeIcons.solid.check });
const gamesIcon = Icon({ icon: MaterialIcons.filled.games, size: 36 });

const app = document.getElementById('app');

app.appendChild(checkIcon);
app.appendChild(gamesIcon);

Using more than one framework

If you are using more than one framework in your project then you will need to set the window.iconsUI value to the relavant IconsUI Code in the table at the top of this file before you import the icons-ui package.

For example, if my page was using React and Vue, and I wanted to use icons-ui with Vue, I would need to set window.iconsUI to vue before importing Icon from 'icons-ui`.