@migliori/universal-icon-picker
Version:
Vanilla JS Icon Picker for any Icon Library
56 lines (40 loc) • 2.83 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</title>
<meta name="description" content="Explore the Universal Icon Picker demo, a comprehensive tool for selecting and integrating icons from various libraries into your projects.">
<link rel="stylesheet" href="demo/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</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="demo/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 flex justify-content-between">
<nav class="demo-nav d-flex justify-content-around">
<a class="demo-btn active" href="#"><img src="demo/assets/images/home.svg" alt="home" width="16px" height="14px"></a>
<a class="demo-btn" href="demo/demo-1.html">Demo 1</a>
<a class="demo-btn" href="demo/demo-2.html">Demo 2</a>
<a class="demo-btn" href="demo/demo-3.html">Demo 3</a>
<a class="demo-btn" href="demo/demo-4.html">Demo 4</a>
<a class="demo-btn" href="demo/demo-5.html">Demo 5</a>
</nav>
<p> </p>
<div id="demo-desc" class="d-flex justify-content-center">
<div>
<h4>Demo 1 <a class="demo-link" href="demo/demo-1.html">Simple icon picker with <var>onSelect()</var> and <var>onReset()</var> callbacks</a></h4>
<h4>Demo 2 <a class="demo-link" href="demo/demo-2.html">Icon picker attached to an input element</a></h4>
<h4>Demo 3 <a class="demo-link" href="demo/demo-3.html">Multiple icon pickers on the same page.</a></h4>
<h4>Demo 4 <a class="demo-link" href="demo/demo-4.html">Select an icon library then open the picker</a></h4>
<h4>Demo 5 <a class="demo-link" href="demo/demo-5.html">Set a random library on each opening with <var>onBeforeOpen</var></a></h4>
</div>
</div>
</div>
</body>
</html>