mirror of
https://github.com/iconify/iconify.git
synced 2024-09-21 01:39:00 +00:00
177 lines
5.5 KiB
HTML
177 lines
5.5 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>Iconify Demo: Loading Icons</title>
|
|
<style>
|
|
html,
|
|
body {
|
|
margin: 0;
|
|
padding: 0;
|
|
background: #fff;
|
|
color: #000;
|
|
}
|
|
body {
|
|
padding: 8px;
|
|
font-size: 16px;
|
|
line-height: 24px;
|
|
}
|
|
p {
|
|
margin: 0;
|
|
padding: 8px;
|
|
color: rgba(0, 0, 0, 0.8);
|
|
}
|
|
p:nth-child(2n) {
|
|
background-color: #f8f8f8;
|
|
}
|
|
svg {
|
|
color: #292;
|
|
}
|
|
</style>
|
|
<script>
|
|
// Preload icons before importing Iconify
|
|
IconifyPreload = [
|
|
{
|
|
prefix: 'z123-preload',
|
|
icons: {
|
|
check2: {
|
|
body:
|
|
'<g fill="currentColor"><path fill-rule="evenodd" d="M12.354 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L5 10.293l6.646-6.647a.5.5 0 0 1 .708 0z"></path><path d="M6.25 8.043l-.896-.897a.5.5 0 1 0-.708.708l.897.896l.707-.707zm1 2.414l.896.897a.5.5 0 0 0 .708 0l7-7a.5.5 0 0 0-.708-.708L8.5 10.293l-.543-.543l-.707.707z"/></g>',
|
|
},
|
|
},
|
|
width: 16,
|
|
height: 16,
|
|
},
|
|
{
|
|
provider: 'test-provider',
|
|
prefix: 'z234-preload',
|
|
icons: {
|
|
check2: {
|
|
body:
|
|
'<g fill="currentColor"><path fill-rule="evenodd" d="M12.354 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L5 10.293l6.646-6.647a.5.5 0 0 1 .708 0z"></path><path d="M6.25 8.043l-.896-.897a.5.5 0 1 0-.708.708l.897.896l.707-.707zm1 2.414l.896.897a.5.5 0 0 0 .708 0l7-7a.5.5 0 0 0-.708-.708L8.5 10.293l-.543-.543l-.707.707z"/></g>',
|
|
},
|
|
},
|
|
width: 16,
|
|
height: 16,
|
|
},
|
|
];
|
|
</script>
|
|
<script src="../dist/iconify.min.js"></script>
|
|
<script>
|
|
// Disable cache
|
|
Iconify.enableCache('local', false);
|
|
Iconify.enableCache('session', false);
|
|
|
|
// Add icons without provider
|
|
Iconify.addCollection({
|
|
prefix: 'z123-add-collection',
|
|
icons: {
|
|
check2: {
|
|
body:
|
|
'<g fill="currentColor"><path fill-rule="evenodd" d="M12.354 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L5 10.293l6.646-6.647a.5.5 0 0 1 .708 0z"></path><path d="M6.25 8.043l-.896-.897a.5.5 0 1 0-.708.708l.897.896l.707-.707zm1 2.414l.896.897a.5.5 0 0 0 .708 0l7-7a.5.5 0 0 0-.708-.708L8.5 10.293l-.543-.543l-.707.707z"/></g>',
|
|
},
|
|
},
|
|
width: 16,
|
|
height: 16,
|
|
});
|
|
Iconify.addIcon('z123-add-icon:check2', {
|
|
body:
|
|
'<g fill="currentColor"><path fill-rule="evenodd" d="M12.354 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L5 10.293l6.646-6.647a.5.5 0 0 1 .708 0z"></path><path d="M6.25 8.043l-.896-.897a.5.5 0 1 0-.708.708l.897.896l.707-.707zm1 2.414l.896.897a.5.5 0 0 0 .708 0l7-7a.5.5 0 0 0-.708-.708L8.5 10.293l-.543-.543l-.707.707z"/></g>',
|
|
width: 16,
|
|
height: 16,
|
|
});
|
|
|
|
// Add icons with provider
|
|
Iconify.addCollection(
|
|
{
|
|
prefix: 'z234-add-collection',
|
|
icons: {
|
|
check2: {
|
|
body:
|
|
'<g fill="currentColor"><path fill-rule="evenodd" d="M12.354 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L5 10.293l6.646-6.647a.5.5 0 0 1 .708 0z"></path><path d="M6.25 8.043l-.896-.897a.5.5 0 1 0-.708.708l.897.896l.707-.707zm1 2.414l.896.897a.5.5 0 0 0 .708 0l7-7a.5.5 0 0 0-.708-.708L8.5 10.293l-.543-.543l-.707.707z"/></g>',
|
|
},
|
|
},
|
|
width: 16,
|
|
height: 16,
|
|
},
|
|
'test-provider'
|
|
);
|
|
Iconify.addIcon('@test-provider:z234-add-icon:check2', {
|
|
body:
|
|
'<g fill="currentColor"><path fill-rule="evenodd" d="M12.354 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L5 10.293l6.646-6.647a.5.5 0 0 1 .708 0z"></path><path d="M6.25 8.043l-.896-.897a.5.5 0 1 0-.708.708l.897.896l.707-.707zm1 2.414l.896.897a.5.5 0 0 0 .708 0l7-7a.5.5 0 0 0-.708-.708L8.5 10.293l-.543-.543l-.707.707z"/></g>',
|
|
width: 16,
|
|
height: 16,
|
|
});
|
|
|
|
// Load after delay
|
|
[3, 5].forEach((delay) => {
|
|
setTimeout(() => {
|
|
document.getElementById('delay' + delay).innerHTML =
|
|
'Icon loaded after ' +
|
|
delay +
|
|
' seconds: <span class="iconify-inline" data-icon="bi:check-all"></span>';
|
|
}, delay * 1000);
|
|
});
|
|
</script>
|
|
</head>
|
|
<body>
|
|
<p>
|
|
This page tests various ways to dynamically load icons without API
|
|
(except for first example that uses API).<br />
|
|
On success, after each line of text there should be a green icon.
|
|
</p>
|
|
<p>
|
|
Icon loaded from API:
|
|
<span class="iconify-inline" data-icon="bi:check2"></span>
|
|
</p>
|
|
|
|
<p>
|
|
Icon loaded with addCollection():
|
|
<span
|
|
class="iconify-inline"
|
|
data-icon="z123-add-collection:check2"
|
|
></span>
|
|
</p>
|
|
<p>
|
|
Icon loaded with addIcon():
|
|
<span
|
|
class="iconify-inline"
|
|
data-icon="z123-add-icon:check2"
|
|
></span>
|
|
</p>
|
|
<p>
|
|
Icon loaded with IconifyPreload:
|
|
<span class="iconify-inline" data-icon="z123-preload:check2"></span>
|
|
</p>
|
|
|
|
<p>
|
|
Icon loaded with addCollection() and custom provider:
|
|
<span
|
|
class="iconify-inline"
|
|
data-icon="@test-provider:z234-add-collection:check2"
|
|
></span>
|
|
</p>
|
|
<p>
|
|
Icon loaded with addIcon() and custom provider:
|
|
<span
|
|
class="iconify-inline"
|
|
data-icon="@test-provider:z234-add-icon:check2"
|
|
></span>
|
|
</p>
|
|
<p>
|
|
Icon loaded with IconifyPreload and custom provider:
|
|
<span
|
|
class="iconify-inline"
|
|
data-icon="@test-provider:z234-preload:check2"
|
|
></span>
|
|
</p>
|
|
<p id="delay3">
|
|
Icon rendered after 3 seconds...
|
|
</p>
|
|
<p id="delay5">
|
|
Icon rendered after 5 seconds...
|
|
</p>
|
|
</body>
|
|
</html>
|