LibreICONS

This is an small JavaScript toolkit for request the LibreICONS at runtime. See the LibreICONS repository.

Usage

The usage of this toolkit is very simple. The first step is include the CSS and the JavaScript of this tool:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/EduardoJM/LibreICONS-remote@master/css/libre.css" />
</head>
<body>

    <script src="https://cdn.jsdelivr.net/gh/EduardoJM/LibreICONS-remote@master/js/libre.js"></script>
</body>
</html>

And, now, use the i.libre html tag to add the icon.

<i class="libre" data-icon="{ICON NAME}"></i>

An usage example is, to add the google brand icon in the page:

<i class="libre" data-icon="brand-google"></i>

Color Icons

For the color icons, an new html attribute is needed. Add the data-color="true" attribute to the i.libre tag. See the example:

<i class="libre" data-icon="gui-binoculars" data-color="true"></i>

Icons

All the icons in the master branch (svg and svg-color folders) in the repository of LibreICONS is supported for this tool by using this small tool. An list of this icons with an search bar is disponible in Icons Page.

Auto initialization

In the default, all <i class="libre" (...)></i> html tag is processed and the data-icon is requested from the repository in the DOMContentLoaded event. In some cases, like the icon finder, the auto load is not an good performatic, and, to disable the auto load, add the meta tag in the header of the document:

<meta name="libre:autoload" value="false" />