Nobel Prize Magnet

    icons-ui
    TypeScript icon, indicating that this package has built-in type declarations

    0.4.1 • Public • Published

    icons-ui

    npm npm bundle size NPM

    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`.

    Install

    npm i icons-ui

    DownloadsWeekly Downloads

    11

    Version

    0.4.1

    License

    MIT

    Unpacked Size

    1.14 MB

    Total Files

    20

    Last publish

    Collaborators

    • joshuahylands