@migliori/universal-icon-picker
Version:
Vanilla JS Icon Picker for any Icon Library
83 lines (70 loc) • 4.18 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 1</title>
<meta name="description" content="Explore the Universal Icon Picker demo 1, a simple icon picker with onSelect() and onReset() callbacks. Choose from a variety of icons and easily integrate them into your projects.">
<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 1</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 active" href="#">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" href="demo-5.html">Demo 5</a>
</nav>
<div id="demo-desc" class="d-flex justify-content-center">
<div class="demo-border-light">
<h2 class="text-center">Simple icon picker with <var>onSelect()</var> and <var>onReset()</var> callbacks</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">
<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>
document.addEventListener('DOMContentLoaded', function(event) {
const uip = new UniversalIconPicker('#uip-select-btn', {
iconLibraries: [
'happy-icons.min.json',
'font-awesome.min.json'
],
iconLibrariesCss: [
'happy-icons.min.css',
'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css'
],
resetSelector: '#uip-reset-btn',
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>