@migliori/universal-icon-picker
Version:
Vanilla JS Icon Picker for any Icon Library
417 lines (384 loc) • 19.1 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 3</title>
<meta name="description" content="Demo 3 of the Universal Icon Picker project. This page showcases multiple icon pickers on the same page, each attached to a different icon library.">
<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 3</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 active" href="#">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>Multiple icon pickers on the same page.</h2>
<p>Each instance is attached to a different icon library.<br>The mode is set to "onrequest", which allows each library to be loaded only when its icon picker is clicked.</p>
</div>
</div>
<h2 class="demo-color-1-dark">Font Awesome icons</h2>
<div class="d-flex justify-content-around flex-wrap">
<div class="demo-wrapper">
<h4 class="demo-bg-1">Font Awesome Regular</h4>
<button id="far-select-btn" class="demo-btn btn-hover-effect btn-hover-effect--effect-4 demo-btn-sm demo-bg-1 text-white" title="Font Awesome Regular">Open the icon picker</button>
<div class="demo-output-icon-sm demo-color-1-dark" id="far-output-icon"></div>
</div>
<div class="demo-wrapper">
<h4 class="demo-bg-1">Font Awesome Solid</h4>
<button id="fas-select-btn" class="demo-btn btn-hover-effect btn-hover-effect--effect-4 demo-btn-sm demo-bg-1 text-white" title="Font Awesome Solid">Open the icon picker</button>
<div class="demo-output-icon-sm demo-color-1-dark" id="fas-output-icon"></div>
</div>
<div class="demo-wrapper">
<h4 class="demo-bg-1">Font Awesome Brands</h4>
<button id="fab-select-btn" class="demo-btn btn-hover-effect btn-hover-effect--effect-4 demo-btn-sm demo-bg-1 text-white" title="Font Awesome Brands">Open the icon picker</button>
<div class="demo-output-icon-sm demo-color-1-dark" id="fab-output-icon"></div>
</div>
</div>
<h2 class="demo-color-2-dark">Material Icons</h2>
<div class="d-flex justify-content-around flex-wrap">
<div class="demo-wrapper">
<h4 class="demo-bg-2">Material Icons Filled</h4>
<button id="mi-filled-select-btn" class="demo-btn btn-hover-effect btn-hover-effect--effect-4 demo-btn-sm demo-bg-2" title="Material Icons Filled">Open the icon picker</button>
<div class="demo-output-icon-sm demo-color-2-dark" id="mi-filled-output-icon"></div>
</div>
<div class="demo-wrapper">
<h4 class="demo-bg-2">Material Icons Outlined</h4>
<button id="mi-outlined-select-btn" class="demo-btn btn-hover-effect btn-hover-effect--effect-4 demo-btn-sm demo-bg-2" title="Material Icons Outlined">Open the icon picker</button>
<div class="demo-output-icon-sm demo-color-2-dark" id="mi-outlined-output-icon"></div>
</div>
<div class="demo-wrapper">
<h4 class="demo-bg-2">Material Icons Round</h4>
<button id="mi-round-select-btn" class="demo-btn btn-hover-effect btn-hover-effect--effect-4 demo-btn-sm demo-bg-2" title="Material Icons Round">Open the icon picker</button>
<div class="demo-output-icon-sm demo-color-2-dark" id="mi-round-output-icon"></div>
</div>
<div class="demo-wrapper">
<h4 class="demo-bg-2">Material Icons Sharp</h4>
<button id="mi-sharp-select-btn" class="demo-btn btn-hover-effect btn-hover-effect--effect-4 demo-btn-sm demo-bg-2" title="Material Icons Sharp">Open the icon picker</button>
<div class="demo-output-icon-sm demo-color-2-dark" id="mi-sharp-output-icon"></div>
</div>
<div class="demo-wrapper">
<h4 class="demo-bg-2">Material Icons Two-tone</h4>
<button id="mi-two-tone-select-btn" class="demo-btn btn-hover-effect btn-hover-effect--effect-4 demo-btn-sm demo-bg-2" title="Material Icons Brands">Open the icon picker</button>
<div class="demo-output-icon-sm demo-color-2-dark" id="mi-two-tone-output-icon"></div>
</div>
</div>
<h2 class="demo-color-2-dark">Other libraries</h2>
<div class="d-flex justify-content-around flex-wrap">
<div class="demo-wrapper">
<h3 class="demo-color-3-dark">Bootstrap Icons</h3>
<button id="bi-select-btn" class="demo-btn btn-hover-effect btn-hover-effect--effect-4 demo-btn-sm demo-bg-3" title="Bootstrap Icons">Open the icon picker</button>
<div class="demo-output-icon-sm demo-color-3-dark" id="bi-output-icon"></div>
</div>
<div class="demo-wrapper">
<h3 class="demo-color-3-dark">Foundation Icons</h3>
<button id="fi-select-btn" class="demo-btn btn-hover-effect btn-hover-effect--effect-4 demo-btn-sm demo-bg-3" title="Foundation Icons">Open the icon picker</button>
<div class="demo-output-icon-sm demo-color-3-dark" id="fi-output-icon"></div>
</div>
<div class="demo-wrapper">
<h3 class="demo-color-3-dark">Fomantic-UI Icons</h3>
<button id="fomantic-ui-select-btn" class="demo-btn btn-hover-effect btn-hover-effect--effect-4 demo-btn-sm demo-bg-3" title="Fomantic-UI Icons">Open the icon picker</button>
<div class="demo-output-icon-sm demo-color-3-dark" id="fomantic-ui-output-icon"></div>
</div>
<div class="demo-wrapper">
<h3 class="demo-color-3-dark">Zondicons</h3>
<button id="zi-select-btn" class="demo-btn btn-hover-effect btn-hover-effect--effect-4 demo-btn-sm demo-bg-3" title="Zondicons">Open the icon picker</button>
<div class="demo-output-icon-sm demo-color-3-dark" id="zi-output-icon"></div>
</div>
<div class="demo-wrapper">
<h3 class="demo-color-3-dark">Icomoon</h3>
<button id="icomoon-select-btn" class="demo-btn btn-hover-effect btn-hover-effect--effect-4 demo-btn-sm demo-bg-3" title="Icomoon">Open the icon picker</button>
<div class="demo-output-icon-sm demo-color-3-dark" id="icomoon-output-icon"></div>
</div>
<div class="demo-wrapper">
<h3 class="demo-color-3-dark">Open Iconic</h3>
<button id="oi-select-btn" class="demo-btn btn-hover-effect btn-hover-effect--effect-4 demo-btn-sm demo-bg-3" title="Open Iconic">Open the icon picker</button>
<div class="demo-output-icon-sm demo-color-3-dark" id="oi-output-icon"></div>
</div>
<div class="demo-wrapper">
<h3 class="demo-color-3-dark">Tabler Icons</h3>
<button id="ti-select-btn" class="demo-btn btn-hover-effect btn-hover-effect--effect-4 demo-btn-sm demo-bg-3" title="Tabler Icons">Open the icon picker</button>
<div class="demo-output-icon-sm demo-color-3-dark" id="ti-output-icon"></div>
</div>
<div class="demo-wrapper">
<h3 class="demo-color-3-dark">Weather Icons</h3>
<button id="wi-select-btn" class="demo-btn btn-hover-effect btn-hover-effect--effect-4 demo-btn-sm demo-bg-3" title="Weather Icons">Open the icon picker</button>
<div class="demo-output-icon-sm demo-color-3-dark" id="wi-output-icon"></div>
</div>
<div class="demo-wrapper">
<h3 class="demo-color-3-dark">Feather Icons</h3>
<button id="feather-select-btn" class="demo-btn btn-hover-effect btn-hover-effect--effect-4 demo-btn-sm demo-bg-3" title="Feather Icons">Open the icon picker</button>
<div class="demo-output-icon-sm demo-color-3-dark" id="feather-output-icon"></div>
</div>
<div class="demo-wrapper">
<h3 class="demo-color-3-dark">Elegant Icons</h3>
<button id="elegant-select-btn" class="demo-btn btn-hover-effect btn-hover-effect--effect-4 demo-btn-sm demo-bg-3" title="Feather Icons">Open the icon picker</button>
<div class="demo-output-icon-sm demo-color-3-dark" id="elegant-output-icon"></div>
</div>
<div class="demo-wrapper">
<h3 class="demo-color-3-dark">Happy Icons</h3>
<button id="hi-select-btn" class="demo-btn btn-hover-effect btn-hover-effect--effect-4 demo-btn-sm demo-bg-3" title="Happy Icons">Open the icon picker</button>
<div class="demo-output-icon-sm demo-color-3-dark" id="hi-output-icon"></div>
</div>
</div>
</div>
<script src="../assets/js/universal-icon-picker.min.js"></script>
<script>
const uipConfigs = [
{
selector: '#bi-select-btn',
onSelect: function(jsonIconData) {
document.getElementById('bi-output-icon').innerHTML = jsonIconData.iconHtml;
},
iconLibraries: [
'bootstrap-icons.min.json'
],
iconLibrariesCss: [
'https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.3/font/bootstrap-icons.css'
]
},
{
selector: '#elegant-select-btn',
onSelect: function(jsonIconData) {
document.getElementById('elegant-output-icon').innerHTML = jsonIconData.iconHtml;
},
iconLibraries: [
'elegant-icons.min.json'
],
iconLibrariesCss: [
'elegant-icons.min.css'
]
},
{
selector: '#feather-select-btn',
onSelect: function(jsonIconData) {
document.getElementById('feather-output-icon').innerHTML = jsonIconData.iconHtml;
},
iconLibraries: [
'feather-icons.min.json'
],
iconLibrariesCss: [
'feather-icons.min.css'
]
},
{
selector: '#far-select-btn',
onSelect: function(jsonIconData) {
document.getElementById('far-output-icon').innerHTML = jsonIconData.iconHtml;
},
iconLibraries: [
'font-awesome-regular.min.json'
],
iconLibrariesCss: [
'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css'
]
},
{
selector: '#fas-select-btn',
onSelect: function(jsonIconData) {
document.getElementById('fas-output-icon').innerHTML = jsonIconData.iconHtml;
},
iconLibraries: [
'font-awesome-solid.min.json'
],
iconLibrariesCss: [
'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css'
]
},
{
selector: '#fab-select-btn',
onSelect: function(jsonIconData) {
document.getElementById('fab-output-icon').innerHTML = jsonIconData.iconHtml;
},
iconLibraries: [
'font-awesome-brands.min.json'
],
iconLibrariesCss: [
'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css'
]
},
{
selector: '#fi-select-btn',
onSelect: function(jsonIconData) {
document.getElementById('fi-output-icon').innerHTML = jsonIconData.iconHtml;
},
iconLibraries: [
'foundation-icons.min.json'
],
iconLibrariesCss: [
'foundation-icons.min.css'
]
},
{
selector: '#fomantic-ui-select-btn',
onSelect: function (jsonIconData) {
document.getElementById('fomantic-ui-output-icon').innerHTML = jsonIconData.iconHtml;
},
iconLibraries: [
'fomantic-ui.min.json'
],
iconLibrariesCss: [
'fomantic-ui-icons.min.css'
]
},
{
selector: '#hi-select-btn',
onSelect: function(jsonIconData) {
document.getElementById('hi-output-icon').innerHTML = jsonIconData.iconHtml;
},
iconLibraries: [
'happy-icons.min.json'
],
iconLibrariesCss: [
'happy-icons.min.css'
]
},
{
selector: '#icomoon-select-btn',
onSelect: function(jsonIconData) {
document.getElementById('icomoon-output-icon').innerHTML = jsonIconData.iconHtml;
},
iconLibraries: [
'icomoon.min.json'
],
iconLibrariesCss: [
'icomoon.min.css'
]
},
{
selector: '#mi-filled-select-btn',
onSelect: function(jsonIconData) {
document.getElementById('mi-filled-output-icon').innerHTML = jsonIconData.iconHtml;
},
iconLibraries: [
'material-icons-filled.min.json'
],
iconLibrariesCss: [
'https://fonts.googleapis.com/css2?family=Material+Icons'
]
},
{
selector: '#mi-outlined-select-btn',
onSelect: function(jsonIconData) {
document.getElementById('mi-outlined-output-icon').innerHTML = jsonIconData.iconHtml;
},
iconLibraries: [
'material-icons-outlined.min.json'
],
iconLibrariesCss: [
'https://fonts.googleapis.com/css2?family=Material+Icons+Outlined'
]
},
{
selector: '#mi-round-select-btn',
onSelect: function(jsonIconData) {
document.getElementById('mi-round-output-icon').innerHTML = jsonIconData.iconHtml;
},
iconLibraries: [
'material-icons-round.min.json'
],
iconLibrariesCss: [
'https://fonts.googleapis.com/css2?family=Material+Icons+Round'
]
},
{
selector: '#mi-sharp-select-btn',
onSelect: function(jsonIconData) {
document.getElementById('mi-sharp-output-icon').innerHTML = jsonIconData.iconHtml;
},
iconLibraries: [
'material-icons-sharp.min.json'
],
iconLibrariesCss: [
'https://fonts.googleapis.com/css2?family=Material+Icons+Sharp'
]
},
{
selector: '#mi-two-tone-select-btn',
onSelect: function(jsonIconData) {
document.getElementById('mi-two-tone-output-icon').innerHTML = jsonIconData.iconHtml;
},
iconLibraries: [
'material-icons-two-tone.min.json'
],
iconLibrariesCss: [
'https://fonts.googleapis.com/css2?family=Material+Icons+Two+Tone'
]
},
{
selector: '#oi-select-btn',
onSelect: function(jsonIconData) {
document.getElementById('oi-output-icon').innerHTML = jsonIconData.iconHtml;
},
iconLibraries: [
'open-iconic.min.json'
],
iconLibrariesCss: [
'open-iconic.min.css'
]
},
{
selector: '#ti-select-btn',
onSelect: function(jsonIconData) {
document.getElementById('ti-output-icon').innerHTML = jsonIconData.iconHtml;
},
iconLibraries: [
'tabler-icons.min.json'
],
iconLibrariesCss: [
'tabler-icons.min.css'
]
},
{
selector: '#wi-select-btn',
onSelect: function(jsonIconData) {
document.getElementById('wi-output-icon').innerHTML = jsonIconData.iconHtml;
},
iconLibraries: [
'weather-icons.min.json'
],
iconLibrariesCss: [
'weather-icons.min.css'
]
},
{
selector: '#zi-select-btn',
onSelect: function(jsonIconData) {
document.getElementById('zi-output-icon').innerHTML = jsonIconData.iconHtml;
},
iconLibraries: [
'zondicons.min.json'
],
iconLibrariesCss: [
'zondicons.min.css'
]
}
];
const uips = [];
uipConfigs.forEach(conf => {
uips.push(
new UniversalIconPicker(conf.selector, {
onSelect: conf.onSelect,
mode: 'onrequest',
iconLibraries: conf.iconLibraries,
iconLibrariesCss: conf.iconLibrariesCss
})
);
});
</script>
</body>
</html>