agerix/iconify
2
0
Fork 0
mirror of https://github.com/iconify/iconify.git synced 2024-11-09 23:00:56 +00:00
Code Issues Releases Activity

Web component: test universal icon loader in demo

Browse Source
This commit is contained in:
Vjacheslav Trushkin 2022-05-01 21:58:29 +03:00
parent de0f394f5d
commit 1c980b75a8
1 changed files with 71 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

80
packages/icon/demo/usage.html
View File

@ -32,18 +32,80 @@
} }
</style> </style>
<script> <script>
IconifyPreload = [ // Add icon before loading component: it will be added to IconifyPreload global
{ (() => {
// Universal loader example
function add(data) {
// Try iconify-icon
try {
window.customElements
.get('iconify-icon')
.addCollection(data);
} catch (err) {
// Try SVG framework
try {
window.Iconify.addCollection(data);
} catch (err) {
// Add to global preload variable
try {
(
window.IconifyPreload ||
(window.IconifyPreload = [])
).push(data);
} catch (err) {}
}
}
}
add({
prefix: 'test', prefix: 'test',
icons: { icons: {
icon: { icon: {
body: '<mask id="coffee-mask" x="0" y="0" width="16" height="16"><g fill="white"><path d="M5-2c0 2-2 2-2 4s2 2 2 4-2 2-2 4 2 2 2 4M8.5-2c0 2-2 2-2 4s2 2 2 4-2 2-2 4 2 2 2 4M12-2c0 2-2 2-2 4s2 2 2 4-2 2-2 4 2 2 2 4" stroke="white" stroke-width="1" fill="none"><animateMotion path="M0 0v-8" calcMode="linear" dur="3s" repeatCount="indefinite" /></path></g><rect y="4" width="16" height="12" fill="black" /><path d="M2 5H13C14.1046 5 15 5.89543 15 7V8C15 9.10457 14.1046 10 13 10H12V14C12 15.1046 11.1046 16 10 16H4C2.89543 16 2 15.1046 2 14V5Z" fill="white" /><path d="M12 6H13C13.5523 6 14 6.44772 14 7V8C14 8.55228 13.5523 9 13 9H12V6Z" fill="black" /></mask><rect mask="url(#coffee-mask)" width="16" height="16" fill="currentColor" />', body: '<mask id="coffee-mask" x="0" y="0" width="16" height="16"><g fill="white"><path d="M5-2c0 2-2 2-2 4s2 2 2 4-2 2-2 4 2 2 2 4M8.5-2c0 2-2 2-2 4s2 2 2 4-2 2-2 4 2 2 2 4M12-2c0 2-2 2-2 4s2 2 2 4-2 2-2 4 2 2 2 4" stroke="white" stroke-width="1" fill="none"><animateMotion path="M0 0v-8" calcMode="linear" dur="3s" repeatCount="indefinite" /></path></g><rect y="4" width="16" height="12" fill="black" /><path d="M2 5H13C14.1046 5 15 5.89543 15 7V8C15 9.10457 14.1046 10 13 10H12V14C12 15.1046 11.1046 16 10 16H4C2.89543 16 2 15.1046 2 14V5Z" fill="white" /><path d="M12 6H13C13.5523 6 14 6.44772 14 7V8C14 8.55228 13.5523 9 13 9H12V6Z" fill="black" /></mask><rect mask="url(#coffee-mask)" width="16" height="16" fill="currentColor" />',
}, },
}, },
}, });
]; })();
</script> </script>
<script src="../dist/iconify-icon.min.js"></script> <script src="../dist/iconify-icon.min.js"></script>
<script>
// Add icon after loading icon component: it will be added using IconifyIcon static method addCollection()
(() => {
// Universal loader example
function add(data) {
// Try iconify-icon
try {
window.customElements
.get('iconify-icon')
.addCollection(data);
return;
} catch (err) {}
// Try SVG framework
try {
window.Iconify.addCollection(data);
return;
} catch (err) {}
// Add to global preload variable
try {
(
window.IconifyPreload ||
(window.IconifyPreload = [])
).push(data);
} catch (err) {}
}
add({
prefix: 'test2',
icons: {
icon: {
body: '<mask id="coffee-mask" x="0" y="0" width="16" height="16"><g fill="white"><path d="M5-2c0 2-2 2-2 4s2 2 2 4-2 2-2 4 2 2 2 4M8.5-2c0 2-2 2-2 4s2 2 2 4-2 2-2 4 2 2 2 4M12-2c0 2-2 2-2 4s2 2 2 4-2 2-2 4 2 2 2 4" stroke="white" stroke-width="1" fill="none"><animateMotion path="M0 0v-8" calcMode="linear" dur="3s" repeatCount="indefinite" /></path></g><rect y="4" width="16" height="12" fill="black" /><path d="M2 5H13C14.1046 5 15 5.89543 15 7V8C15 9.10457 14.1046 10 13 10H12V14C12 15.1046 11.1046 16 10 16H4C2.89543 16 2 15.1046 2 14V5Z" fill="white" /><path d="M12 6H13C13.5523 6 14 6.44772 14 7V8C14 8.55228 13.5523 9 13 9H12V6Z" fill="black" /></mask><rect mask="url(#coffee-mask)" width="16" height="16" fill="currentColor" />',
},
},
});
})();
</script>
</head> </head>
<body> <body>
<p> <p>
@ -166,7 +228,7 @@
></iconify-icon> ></iconify-icon>
</p> </p>
<p> <p>
Flip: Flip (8 icons):
<iconify-icon inline icon="test:icon"></iconify-icon> <iconify-icon inline icon="test:icon"></iconify-icon>
<iconify-icon inline icon="test:icon" mode="style"></iconify-icon> <iconify-icon inline icon="test:icon" mode="style"></iconify-icon>
<iconify-icon <iconify-icon
@ -182,23 +244,23 @@
></iconify-icon> ></iconify-icon>
<iconify-icon <iconify-icon
inline inline
icon="test:icon" icon="test2:icon"
flip="vertical" flip="vertical"
></iconify-icon> ></iconify-icon>
<iconify-icon <iconify-icon
inline inline
icon="test:icon" icon="test2:icon"
flip="vertical" flip="vertical"
mode="style" mode="style"
></iconify-icon> ></iconify-icon>
<iconify-icon <iconify-icon
inline inline
icon="test:icon" icon="test2:icon"
flip="horizontal,vertical" flip="horizontal,vertical"
></iconify-icon> ></iconify-icon>
<iconify-icon <iconify-icon
inline inline
icon="test:icon" icon="test2:icon"
flip="horizontal,vertical" flip="horizontal,vertical"
mode="style" mode="style"
></iconify-icon> ></iconify-icon>