@migliori/universal-icon-picker
Version:
Vanilla JS Icon Picker for any Icon Library
146 lines (130 loc) • 6.61 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Universal icon picker - demo 5</title>
<meta name="description" content="Demo 5 of the Universal Icon Picker project. This page demonstrates loading a random icon library on each opening using the onBeforeOpen option.">
<link rel="stylesheet" href="assets/stylesheets/demo-styles.min.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Arsenal:wght@400;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/github-fork-ribbon-css/0.2.3/gh-fork-ribbon.min.css" />
</head>
<body>
<h1>Universal icon picker - demo 5</h1>
<p class="text-center"><a id="view-on-github-btn" class="demo-btn demo-border-light" href="https://github.com/migliori/universal-icon-picker">View on Github <img src="assets/images/github.svg" width="24px" height="24px" alt="View on Github"></a></p>
<!-- github-ribbon -->
<a class="github-fork-ribbon" href="https://github.com/migliori/universal-icon-picker" data-ribbon="Fork me on GitHub" title="Fork me on GitHub">Fork me on GitHub</a>
<div class="container">
<nav class="demo-nav d-flex justify-content-around">
<a class="demo-btn" href="/"><img src="assets/images/home.svg" alt="home" width="16px" height="14px"></a>
<a class="demo-btn" href="demo-1.html">Demo 1</a>
<a class="demo-btn" href="demo-2.html">Demo 2</a>
<a class="demo-btn" href="demo-3.html">Demo 3</a>
<a class="demo-btn" href="demo-4.html">Demo 4</a>
<a class="demo-btn active" href="#">Demo 5</a>
</nav>
<div id="demo-desc" class="d-flex justify-content-center">
<div class="demo-border-light">
<h2 class="text-center">Load a random icon library on each opening using the <var>onBeforeOpen</var> option</h2>
</div>
</div>
<div class="d-flex justify-content-center">
<button id="uip-select-btn" class="demo-btn demo-btn-lg btn-hover-effect btn-hover-effect--effect-4 demo-bg-1 text-white" title="Open the Icon Library">Click to open the Icon Library</button>
<button id="uip-reset-btn" class="demo-btn demo-btn-lg btn-hover-effect btn-hover-effect--effect-4 demo-bg-danger text-white" title="Reset">Reset</button>
</div>
<div class="demo-output hidden" id="output">
<p><strong id="icon-library-info"></strong> loaded.</p>
<pre><code class="demo-output-json" id="output-json"></code></pre>
<div class="demo-output-icon" id="output-icon"></div>
</div>
</div>
<script src="../assets/js/universal-icon-picker.min.js"></script>
<script>
const availableIconLibraries = [
{
iconLibrary: 'font-awesome',
iconLibraryCss: 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css'
},
{
iconLibrary: 'material-icons-filled',
iconLibraryCss: 'https://fonts.googleapis.com/css2?family=Material+Icons'
},
{
iconLibrary: 'bootstrap-icons',
iconLibraryCss: 'https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.3/font/bootstrap-icons.css'
},
{
iconLibrary: 'elegant-icons',
iconLibraryCss: 'elegant-icons.min.css'
},
{
iconLibrary: 'feather-icons',
iconLibraryCss: 'feather-icons.min.css'
},
{
iconLibrary: 'fomantic-ui',
iconLibraryCss: 'fomantic-ui-icons.min.css'
},
{
iconLibrary: 'foundation-icons',
iconLibraryCss: 'foundation-icons.min.css'
},
{
iconLibrary: 'happy-icons',
iconLibraryCss: 'happy-icons.min.css'
},
{
iconLibrary: 'icomoon',
iconLibraryCss: 'icomoon.min.css'
},
{
iconLibrary: 'open-iconic',
iconLibraryCss: 'open-iconic.min.css'
},
{
iconLibrary: 'tabler-icons',
iconLibraryCss: 'tabler-icons.min.css'
},
{
iconLibrary: 'weather-icons',
iconLibraryCss: 'weather-icons.min.css'
},
{
iconLibrary: 'zondicons',
iconLibraryCss: 'zondicons.min.css'
}
];
document.addEventListener('DOMContentLoaded', function(event) {
var uip = new UniversalIconPicker('#uip-select-btn', {
resetSelector: '#uip-reset-btn',
onBeforeOpen: function() {
// random number between 0 and max
let max = availableIconLibraries.length;
let randomIndex = Math.floor(Math.random() * max);
// set a random library
let currentIconLibrary = availableIconLibraries[randomIndex].iconLibrary,
currentIconLibraryCss = availableIconLibraries[randomIndex].iconLibraryCss;
uip.setOptions({
iconLibraries: [currentIconLibrary + '.min.json'],
iconLibrariesCss: [currentIconLibraryCss]
});
document.getElementById('icon-library-info').innerText = currentIconLibrary;
},
onSelect: function(jsonIconData) {
console.log(jsonIconData);
document.getElementById('output-json').innerHTML = JSON.stringify(jsonIconData, null, 4);
document.getElementById('output-icon').innerHTML = jsonIconData.iconHtml;
document.getElementById('output').classList.remove('hidden');
},
onReset: function() {
document.getElementById('output-json').innerHTML = '';
document.getElementById('output-icon').innerHTML = '';
document.getElementById('output').classList.add('hidden');
}
});
});
</script>
</body>
</html>