@migliori/universal-icon-picker
Version:
Vanilla JS Icon Picker for any Icon Library
123 lines (104 loc) • 7.98 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 4</title>
<meta name="description" content="Demo 4 of the Universal Icon Picker project. This page allows you to select an icon library and open the picker.">
<link rel="stylesheet" href="assets/stylesheets/demo-styles.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/github-fork-ribbon-css/0.2.3/gh-fork-ribbon.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slim-select/1.27.1/slimselect.css" integrity="sha512-mFWppJpPTKV+oKy18RnwA/YwACBlOyPjbJH7U78JWwEo724CApxbcmDKVZIs8K3rTfQ/SRCuaperpNRqiOnruw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body>
<h1>Universal icon picker - demo 4</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 active" href="#">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">Select an icon library then open the picker</h2>
</div>
</div>
<div id="icon-library-select-wrapper">
<select name="icon-library-select">
<optgroup label="Font Awesome">
<option value="font-awesome" data-css="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" selected="selected">Font Awesome (all)</option>
<option value="font-awesome-solid" data-css="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">Font Awesome Solid</option>
<option value="font-awesome-regular" data-css="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">Font Awesome Regular</option>
<option value="font-awesome-brands" data-css="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">Font Awesome Brands</option>
</optgroup>
<optgroup label="Material Icons">
<option value="material-icons-filled" data-css="https://fonts.googleapis.com/css2?family=Material+Icons">Material Icons Filled</option>
<option value="material-icons-outlined" data-css="https://fonts.googleapis.com/css2?family=Material+Icons+Outlined">Material Icons Outlined</option>
<option value="material-icons-round" data-css="https://fonts.googleapis.com/css2?family=Material+Icons+Round">Material Icons Round</option>
<option value="material-icons-sharp" data-css="https://fonts.googleapis.com/css2?family=Material+Icons+Sharp">Material Icons Sharp</option>
<option value="material-icons-two-tone" data-css="https://fonts.googleapis.com/css2?family=Material+Icons+Two+Tone">Material Icons Two-tone</option>
</optgroup>
<optgroup label="Other libraries">
<option value="bootstrap-icons" data-css="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.3/font/bootstrap-icons.css">Bootstrap Icons</option>
<option value="elegant-icons" data-css="elegant-icons.min.css">Elegant Icons</option>
<option value="feather-icons" data-css="feather-icons.min.css">Feather Icons</option>
<option value="fomantic-ui" data-css="fomantic-ui-icons.min.css">Fomantic UI</option>
<option value="foundation-icons" data-css="foundation-icons.min.css">Foundation Icons</option>
<option value="happy-icons" data-css="happy-icons.min.css">Happy Icons</option>
<option value="icomoon" data-css="icomoon.min.css">Icomoon</option>
<option value="open-iconic" data-css="open-iconic.min.css">Open-iconic</option>
<option value="tabler-icons" data-css="tabler-icons.min.css">Tabler Icons</option>
<option value="weather-icons" data-css="weather-icons.min.css">Weather Icons</option>
<option value="zondicons" data-css="zondicons.min.css">Zondicons</option>
</optgroup>
</select>
</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="https://cdnjs.cloudflare.com/ajax/libs/slim-select/1.27.1/slimselect.min.js" integrity="sha512-EVcxQcCcaBzGzRrIQmgFyPW1F5d/bd7c6HP8syxTV00unEUV8TIDnEfDulC2hMBkkY8uVGrI9nP4Cnd8Xz7/7Q==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="../assets/js/universal-icon-picker.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function(event) {
const $selectElement = document.querySelector('select[name ="icon-library-select"]');
new SlimSelect({ select: 'select[name ="icon-library-select"]' });
// create the Universal Icon Picker
const uip = new UniversalIconPicker('#uip-select-btn', {
resetSelector: '#uip-reset-btn',
mode: 'onrequest',
onSelect: function(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');
}
});
$selectElement.addEventListener('change', () => {
let currentIconLibrary = $selectElement.value,
currentIconLibraryCss = $selectElement.options[$selectElement.selectedIndex].dataset.css;
uip.setOptions({
iconLibraries: [ currentIconLibrary + '.min.json' ],
iconLibrariesCss: [currentIconLibraryCss]
});
});
const evt = new Event('change');
$selectElement.dispatchEvent(evt);
});
</script>
</body>
</html>