@migliori/universal-icon-picker
Version:
Vanilla JS Icon Picker for any Icon Library
74 lines (62 loc) • 3.53 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 2</title>
<meta name="description" content="This is a demo page showcasing the Universal Icon Picker. Explore a wide range of icons and easily select and use them in 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 2</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 active" href="#">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">Icon picker attached to an input element</h2>
</div>
</div>
<div class="d-flex justify-content-center">
<input type="text" name="uip-select-input" id="uip-select-input" value="" placeholder="Click to open the Icon Library">
<button id="uip-reset-btn" class="demo-btn demo-bg-danger text-white" title="Reset">Reset</button>
</div>
</div>
<script src="../assets/js/universal-icon-picker.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function(event) {
const uip = new UniversalIconPicker('#uip-select-input', {
iconLibraries: [
'font-awesome-regular.min.json',
'font-awesome-solid.min.json',
'happy-icons.min.json'
],
iconLibrariesCss: [
'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css',
'happy-icons.min.css'
],
resetSelector: '#uip-reset-btn', // must be an ID or '' if no reset button
onSelect: function(jsonIconData) {
document.getElementById('uip-select-input').value = jsonIconData.iconClass;
},
onReset: function() {
document.getElementById('uip-select-input').value = '';
}
});
});
</script>
</body>
</html>