2022-04-30 16:41:16 +00:00
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html lang="en">
|
|
|
|
|
<head>
|
|
|
|
|
<meta charset="UTF-8" />
|
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
2023-06-22 08:50:27 +00:00
|
|
|
<meta
|
|
|
|
|
http-equiv="Content-Security-Policy"
|
|
|
|
|
content="require-trusted-types-for 'script';"
|
|
|
|
|
/>
|
2022-04-30 16:41:16 +00:00
|
|
|
<title>Iconify Icon Demo: Usage</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;
|
|
|
|
|
}
|
|
|
|
|
p:nth-child(2n) {
|
|
|
|
|
background-color: #f8f8f8;
|
|
|
|
|
}
|
|
|
|
|
:where(p:hover) iconify-icon {
|
|
|
|
|
color: green;
|
|
|
|
|
}
|
|
|
|
|
iconify-icon:hover {
|
|
|
|
|
color: red;
|
|
|
|
|
}
|
2023-02-20 18:01:34 +00:00
|
|
|
|
|
|
|
|
.unset-size {
|
|
|
|
|
display: flex;
|
|
|
|
|
gap: 8px;
|
|
|
|
|
background: #f0f0f0;
|
|
|
|
|
}
|
|
|
|
|
.unset-size iconify-icon {
|
|
|
|
|
/* display: block; */
|
|
|
|
|
width: 24px;
|
|
|
|
|
height: 24px;
|
|
|
|
|
animation: animate-unset 5s linear infinite;
|
|
|
|
|
background: #fff;
|
|
|
|
|
}
|
|
|
|
|
.unset-size:hover iconify-icon {
|
|
|
|
|
color: red !important;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@keyframes animate-unset {
|
|
|
|
|
0% {
|
|
|
|
|
width: 24px;
|
2023-02-21 07:04:06 +00:00
|
|
|
height: 24px;
|
2023-02-20 18:01:34 +00:00
|
|
|
color: #000;
|
|
|
|
|
}
|
|
|
|
|
50% {
|
2023-02-21 07:04:06 +00:00
|
|
|
width: 128px;
|
2023-02-20 18:01:34 +00:00
|
|
|
height: 64px;
|
|
|
|
|
color: #800;
|
|
|
|
|
}
|
|
|
|
|
100% {
|
|
|
|
|
width: 24px;
|
|
|
|
|
height: 24px;
|
|
|
|
|
color: #000;
|
|
|
|
|
}
|
|
|
|
|
}
|
2022-04-30 16:41:16 +00:00
|
|
|
</style>
|
|
|
|
|
<script>
|
2022-05-01 18:58:29 +00:00
|
|
|
// 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({
|
2022-04-30 16:41:16 +00:00
|
|
|
prefix: 'test',
|
|
|
|
|
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" />',
|
|
|
|
|
},
|
|
|
|
|
},
|
2022-05-01 18:58:29 +00:00
|
|
|
});
|
2024-01-21 08:00:10 +00:00
|
|
|
|
|
|
|
|
setTimeout(() => {
|
|
|
|
|
const span = document.querySelector('.test-2sec');
|
|
|
|
|
if (span) {
|
|
|
|
|
const icon =
|
|
|
|
|
span.parentElement.querySelector('iconify-icon');
|
|
|
|
|
span.remove();
|
|
|
|
|
icon.setAttribute('icon', 'test:icon');
|
|
|
|
|
}
|
|
|
|
|
}, 2000);
|
2022-05-01 18:58:29 +00:00
|
|
|
})();
|
2022-04-30 16:41:16 +00:00
|
|
|
</script>
|
|
|
|
|
<script src="../dist/iconify-icon.min.js"></script>
|
2022-05-01 18:58:29 +00:00
|
|
|
<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>
|
2022-04-30 16:41:16 +00:00
|
|
|
</head>
|
|
|
|
|
<body>
|
|
|
|
|
<p>
|
|
|
|
|
This is a simple HTML page with few icons.<br />
|
|
|
|
|
There are 2 entries for each sample: one as inline SVG, one using
|
|
|
|
|
style.
|
|
|
|
|
</p>
|
|
|
|
|
<p>
|
|
|
|
|
Icons that behave like images:
|
|
|
|
|
<iconify-icon icon="bi:house-door"></iconify-icon>
|
|
|
|
|
<iconify-icon icon="bi:house-door" mode="style"></iconify-icon>
|
|
|
|
|
<iconify-icon icon="cif:ee"></iconify-icon>
|
|
|
|
|
<iconify-icon icon="cif:ee" mode="style"></iconify-icon>
|
|
|
|
|
</p>
|
|
|
|
|
<p>
|
|
|
|
|
Icon that behaves like an glyph (aligned to bottom of this text):
|
|
|
|
|
<iconify-icon inline icon="bi:house-door"></iconify-icon>
|
|
|
|
|
<iconify-icon
|
|
|
|
|
inline="inline"
|
|
|
|
|
icon="bi:house-door"
|
|
|
|
|
mode="style"
|
|
|
|
|
></iconify-icon>
|
|
|
|
|
<iconify-icon inline icon="cif:ee"></iconify-icon>
|
|
|
|
|
<iconify-icon
|
|
|
|
|
inline="true"
|
|
|
|
|
icon="cif:ee"
|
|
|
|
|
mode="style"
|
|
|
|
|
></iconify-icon>
|
|
|
|
|
</p>
|
|
|
|
|
<p>
|
|
|
|
|
Changing icon color:
|
|
|
|
|
<iconify-icon
|
|
|
|
|
inline
|
|
|
|
|
style="color: red"
|
|
|
|
|
icon="bi:house-door"
|
|
|
|
|
></iconify-icon>
|
|
|
|
|
<iconify-icon
|
|
|
|
|
inline
|
|
|
|
|
style="color: red"
|
|
|
|
|
icon="bi:house-door"
|
|
|
|
|
mode="style"
|
|
|
|
|
></iconify-icon>
|
|
|
|
|
</p>
|
|
|
|
|
<p>
|
|
|
|
|
Big icon (showing various ways to do it):
|
|
|
|
|
<iconify-icon
|
|
|
|
|
inline
|
|
|
|
|
icon="bi:person-lines-fill"
|
|
|
|
|
style="font-size: 2em"
|
|
|
|
|
></iconify-icon>
|
|
|
|
|
<iconify-icon
|
|
|
|
|
inline
|
|
|
|
|
icon="bi:person-lines-fill"
|
|
|
|
|
style="font-size: 2em"
|
|
|
|
|
mode="style"
|
|
|
|
|
></iconify-icon>
|
|
|
|
|
<iconify-icon
|
|
|
|
|
inline
|
|
|
|
|
icon="bi:person-lines-fill"
|
|
|
|
|
height="2em"
|
|
|
|
|
></iconify-icon>
|
|
|
|
|
<iconify-icon
|
|
|
|
|
inline
|
|
|
|
|
icon="bi:person-lines-fill"
|
2023-01-27 17:52:22 +00:00
|
|
|
width="2em"
|
2022-04-30 16:41:16 +00:00
|
|
|
mode="style"
|
|
|
|
|
></iconify-icon>
|
|
|
|
|
<br />
|
|
|
|
|
Icons above should be aligned differently because they have
|
|
|
|
|
different font-size. Vertical alignment is relative to font size.
|
|
|
|
|
</p>
|
|
|
|
|
<p>
|
|
|
|
|
Big icon (showing various ways to do it):
|
|
|
|
|
<iconify-icon
|
|
|
|
|
icon="bi:person-lines-fill"
|
|
|
|
|
style="font-size: 2em"
|
|
|
|
|
></iconify-icon>
|
|
|
|
|
<iconify-icon
|
|
|
|
|
icon="bi:person-lines-fill"
|
|
|
|
|
style="font-size: 2em"
|
|
|
|
|
mode="style"
|
|
|
|
|
></iconify-icon>
|
|
|
|
|
<iconify-icon
|
|
|
|
|
icon="bi:person-lines-fill"
|
2023-01-27 17:52:22 +00:00
|
|
|
width="2em"
|
2022-04-30 16:41:16 +00:00
|
|
|
></iconify-icon>
|
|
|
|
|
<iconify-icon
|
|
|
|
|
icon="bi:person-lines-fill"
|
|
|
|
|
height="2em"
|
|
|
|
|
mode="style"
|
|
|
|
|
></iconify-icon>
|
|
|
|
|
<br />
|
|
|
|
|
Icons above should be aligned identically because they are not using
|
|
|
|
|
inline mode.
|
|
|
|
|
</p>
|
|
|
|
|
<p>
|
|
|
|
|
Rotation:
|
|
|
|
|
<iconify-icon inline icon="bi:image"></iconify-icon>
|
|
|
|
|
<iconify-icon inline icon="bi:image" mode="style"></iconify-icon>
|
|
|
|
|
<iconify-icon inline icon="bi:image" rotate="1"></iconify-icon>
|
|
|
|
|
<iconify-icon
|
|
|
|
|
inline
|
|
|
|
|
icon="bi:image"
|
|
|
|
|
rotate="1"
|
|
|
|
|
mode="style"
|
|
|
|
|
></iconify-icon>
|
|
|
|
|
<iconify-icon inline icon="bi:image" rotate="180deg"></iconify-icon>
|
|
|
|
|
<iconify-icon
|
|
|
|
|
inline
|
|
|
|
|
icon="bi:image"
|
|
|
|
|
rotate="180deg"
|
|
|
|
|
mode="style"
|
|
|
|
|
></iconify-icon>
|
|
|
|
|
<iconify-icon inline icon="bi:image" rotate="75%"></iconify-icon>
|
|
|
|
|
<iconify-icon
|
|
|
|
|
inline
|
|
|
|
|
icon="bi:image"
|
|
|
|
|
rotate="75%"
|
|
|
|
|
mode="style"
|
|
|
|
|
></iconify-icon>
|
|
|
|
|
</p>
|
|
|
|
|
<p>
|
2022-05-28 19:19:18 +00:00
|
|
|
Flip (4 icons, repeated 3 times with different mode attribute):
|
2022-04-30 16:41:16 +00:00
|
|
|
<iconify-icon inline icon="test:icon"></iconify-icon>
|
2022-05-28 19:19:18 +00:00
|
|
|
<iconify-icon inline icon="test:icon" mode="svg"></iconify-icon>
|
2022-04-30 16:41:16 +00:00
|
|
|
<iconify-icon inline icon="test:icon" mode="style"></iconify-icon>
|
|
|
|
|
<iconify-icon
|
|
|
|
|
inline
|
|
|
|
|
icon="test:icon"
|
|
|
|
|
flip="horizontal"
|
|
|
|
|
></iconify-icon>
|
2022-05-28 19:19:18 +00:00
|
|
|
<iconify-icon
|
|
|
|
|
inline
|
|
|
|
|
icon="test:icon"
|
|
|
|
|
flip="horizontal"
|
|
|
|
|
mode="svg"
|
|
|
|
|
></iconify-icon>
|
2022-04-30 16:41:16 +00:00
|
|
|
<iconify-icon
|
|
|
|
|
inline
|
|
|
|
|
icon="test:icon"
|
|
|
|
|
flip="horizontal"
|
|
|
|
|
mode="style"
|
|
|
|
|
></iconify-icon>
|
|
|
|
|
<iconify-icon
|
|
|
|
|
inline
|
2022-05-01 18:58:29 +00:00
|
|
|
icon="test2:icon"
|
2022-04-30 16:41:16 +00:00
|
|
|
flip="vertical"
|
|
|
|
|
></iconify-icon>
|
2022-05-28 19:19:18 +00:00
|
|
|
<iconify-icon
|
|
|
|
|
inline
|
|
|
|
|
icon="test2:icon"
|
|
|
|
|
flip="vertical"
|
|
|
|
|
mode="svg"
|
|
|
|
|
></iconify-icon>
|
2022-04-30 16:41:16 +00:00
|
|
|
<iconify-icon
|
|
|
|
|
inline
|
2022-05-01 18:58:29 +00:00
|
|
|
icon="test2:icon"
|
2022-04-30 16:41:16 +00:00
|
|
|
flip="vertical"
|
|
|
|
|
mode="style"
|
|
|
|
|
></iconify-icon>
|
|
|
|
|
<iconify-icon
|
|
|
|
|
inline
|
2022-05-01 18:58:29 +00:00
|
|
|
icon="test2:icon"
|
2022-04-30 16:41:16 +00:00
|
|
|
flip="horizontal,vertical"
|
|
|
|
|
></iconify-icon>
|
2022-05-28 19:19:18 +00:00
|
|
|
<iconify-icon
|
|
|
|
|
inline
|
|
|
|
|
icon="test2:icon"
|
|
|
|
|
flip="horizontal,vertical"
|
|
|
|
|
mode="svg"
|
|
|
|
|
></iconify-icon>
|
2022-04-30 16:41:16 +00:00
|
|
|
<iconify-icon
|
|
|
|
|
inline
|
2022-05-01 18:58:29 +00:00
|
|
|
icon="test2:icon"
|
2022-04-30 16:41:16 +00:00
|
|
|
flip="horizontal,vertical"
|
|
|
|
|
mode="style"
|
|
|
|
|
></iconify-icon>
|
|
|
|
|
</p>
|
2024-01-21 08:00:10 +00:00
|
|
|
|
|
|
|
|
<h2>Icon with innerHTML</h2>
|
|
|
|
|
<p>
|
|
|
|
|
Keeping innerHTML without icon attribute:
|
|
|
|
|
<iconify-icon>
|
|
|
|
|
<svg
|
|
|
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
|
|
|
width="1em"
|
|
|
|
|
height="1em"
|
|
|
|
|
viewBox="0 0 24 24"
|
|
|
|
|
>
|
|
|
|
|
<path
|
|
|
|
|
fill="currentColor"
|
|
|
|
|
d="M16.5 12.5v1q0 .2.15.35T17 14q.2 0 .35-.15t.15-.35v-1h1q.2 0 .35-.15T19 12q0-.2-.15-.35t-.35-.15h-1v-1q0-.2-.15-.35T17 10q-.2 0-.35.15t-.15.35v1h-1q-.2 0-.35.15T15 12q0 .2.15.35t.35.15zm-4 .25l1.55 1.975q.05.075.55.275q.425 0 .625-.387t-.075-.738L13.75 12l1.425-1.9q.275-.35.075-.725T14.6 9q-.175 0-.312.075t-.238.2L12.5 11.25v-1.5q0-.325-.213-.538T11.75 9q-.325 0-.537.213T11 9.75v4.5q0 .325.213.538t.537.212q.325 0 .538-.213t.212-.537zm-5 .75v-1H9q.425 0 .713-.288T10 11.5V10q0-.425-.288-.712T9 9H6.75q-.325 0-.537.213T6 9.75q0 .325.213.538t.537.212H8.5v1H7q-.425 0-.712.288T6 12.5v1.75q0 .325.213.538T6.75 15h2.5q.325 0 .538-.213T10 14.25q0-.325-.213-.537T9.25 13.5zM5 21q-.825 0-1.412-.587T3 19V5q0-.825.588-1.412T5 3h14q.825 0 1.413.588T21 5v14q0 .825-.587 1.413T19 21z"
|
|
|
|
|
/>
|
|
|
|
|
</svg>
|
|
|
|
|
</iconify-icon>
|
|
|
|
|
</p>
|
|
|
|
|
<p>
|
|
|
|
|
Keeping innerHTML,
|
|
|
|
|
<span class="test-2sec">updating after 2 seconds...</span>:
|
|
|
|
|
<iconify-icon>
|
|
|
|
|
<svg
|
|
|
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
|
|
|
width="1em"
|
|
|
|
|
height="1em"
|
|
|
|
|
viewBox="0 0 24 24"
|
|
|
|
|
>
|
|
|
|
|
<path
|
|
|
|
|
fill="currentColor"
|
|
|
|
|
d="M16.5 12.5v1q0 .2.15.35T17 14q.2 0 .35-.15t.15-.35v-1h1q.2 0 .35-.15T19 12q0-.2-.15-.35t-.35-.15h-1v-1q0-.2-.15-.35T17 10q-.2 0-.35.15t-.15.35v1h-1q-.2 0-.35.15T15 12q0 .2.15.35t.35.15zm-4 .25l1.55 1.975q.05.075.55.275q.425 0 .625-.387t-.075-.738L13.75 12l1.425-1.9q.275-.35.075-.725T14.6 9q-.175 0-.312.075t-.238.2L12.5 11.25v-1.5q0-.325-.213-.538T11.75 9q-.325 0-.537.213T11 9.75v4.5q0 .325.213.538t.537.212q.325 0 .538-.213t.212-.537zm-5 .75v-1H9q.425 0 .713-.288T10 11.5V10q0-.425-.288-.712T9 9H6.75q-.325 0-.537.213T6 9.75q0 .325.213.538t.537.212H8.5v1H7q-.425 0-.712.288T6 12.5v1.75q0 .325.213.538T6.75 15h2.5q.325 0 .538-.213T10 14.25q0-.325-.213-.537T9.25 13.5zM5 21q-.825 0-1.412-.587T3 19V5q0-.825.588-1.412T5 3h14q.825 0 1.413.588T21 5v14q0 .825-.587 1.413T19 21z"
|
|
|
|
|
/>
|
|
|
|
|
</svg>
|
|
|
|
|
</iconify-icon>
|
|
|
|
|
</p>
|
|
|
|
|
|
2023-02-20 18:01:34 +00:00
|
|
|
<h2>Scale icon</h2>
|
|
|
|
|
<p>Using height="none" and CSS, animating width/height and color</p>
|
|
|
|
|
<div class="unset-size">
|
2023-01-27 17:52:22 +00:00
|
|
|
<iconify-icon
|
|
|
|
|
icon="bi:person-lines-fill"
|
|
|
|
|
height="none"
|
2023-02-20 18:01:34 +00:00
|
|
|
mode="svg"
|
2023-01-27 17:52:22 +00:00
|
|
|
></iconify-icon>
|
2023-02-20 18:01:34 +00:00
|
|
|
<iconify-icon
|
|
|
|
|
icon="bi:person-lines-fill"
|
|
|
|
|
height="unset"
|
|
|
|
|
mode="style"
|
|
|
|
|
></iconify-icon>
|
|
|
|
|
</div>
|
2022-04-30 16:41:16 +00:00
|
|
|
</body>
|
|
|
|
|
</html>
|
