Skip to content

Roba1993/Live-Icons

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

23 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Live-Icons

Plain JS Interactive Icons based upon SVG demo here

NPM

Library goals

  • Dependency free library
  • Easy to use, understand and to extend
  • Native es6 with Classes and webcomponents
  • Open to contribute for everyone

Installation

NPM

To use this library with npm, just install it with the following command.

npm i live-icons

In your JavaScript file, import the project like following

import 'live-icons';

Plain HTML

You can use this library by just downloading the index.js file and include it into your project.

Usage

The library can be used in two different ways:

  1. As ready to use webcomponents as shown in the examples below. After the .js file is loaded, just call the function registerInteractiveIcons() to register the icons as webcomponents.
  2. As es6 classes to manually create objects and attach them to your DOM programmatically or enhance them with additional functionality.

Light Demo

Light Icon Example

Light icon visualized as a light-bulb to show status and color.

Attributes:

  • power: Float value between 0.0 and 1.0
  • color: HTML color string for the light bulb on color

Example:

<div>
    <div style="width: 300px; height: 300px;">
        <live-icon-light />
    </div>
    <input type="range" min="0" max="1" value="0" step="0.001"
        oninput="document.querySelector('live-icon-light').power = this.value">
    <button onclick="document.querySelector('live-icon-light').setAttribute('power', 1)">On</button>
    <button onclick="document.querySelector('live-icon-light').power = 0">Off</button>
    <input type="color" name="favcolor" value="#ff0000"
        onchange="document.querySelector('live-icon-light').color = this.value; console.log(this.value);">
</div>

Blind Demo

Blind Icon Example

Blind icon to show the position of a blind

Attributes:

  • open: Float between 0.0 and 1.0 to define how much the blind is lowered
  • angle: Float between 0.0 and 1.0 to define how much the blind is tilted

Example:

<div>
    <div style="width: 300px; height: 300px;">
        <live-icon-blind />
    </div>
    <input type="range" min="0" max="1" value="0" step="0.001"
        oninput="document.querySelector('live-icon-blind').open = this.value">
    <input type="range" min="0" max="1" value="0" step="0.001"
        oninput="document.querySelector('live-icon-blind').angle = this.value">
</div>

Socket Demo

Socket Icon Example

Socket icon to visualize if something is plugged in.

Attributes:

  • power: Integer either 0 or 1 to visualize the status

Example:

<div>
    <div style="width: 300px; height: 300px;">
        <live-icon-socket />
    </div>
    <button onclick="document.querySelector('live-icon-socket').setAttribute('power', 1)">On</button>
    <button onclick="document.querySelector('live-icon-socket').power = 0">Off</button>
</div>

Meter Demo

Meter Icon Example

Meter icon to visualize a consumption.

Attributes:

  • value: The actual value of consumption to show
  • max: The maximal value reachable (red area)

Example:

<div>
    <div style="width: 300px; height: 300px;">
        <live-icon-meter max="9999" />
    </div>
    <input type="range" min="0" max="9999" value="0" step="0.001"
        oninput="document.querySelector('live-icon-meter').value = this.value">
</div>

Contributing

Please contribute!

The goal is to make this library as usefull as possible :)

If you need any kind of help, open an issue or write me an mail. Pull requests are welcome!

License

Copyright © 2019 Robert Schütte

Distributed under the MIT License.

Releases

No releases published

Packages

No packages published