agerix/iconify
2
0
Fork 0
mirror of https://github.com/iconify/iconify.git synced 2024-11-16 17:45:09 +00:00
Code Issues Releases Activity
next
iconify/iconify-icon/icon/demo/usage.html
Vjacheslav Trushkin 8b6da43086 chore: add margin auto to icon inside web component
2024-07-19 15:41:39 +03:00

452 lines
11 KiB
HTML
Raw Permalink Blame History

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta
http-equiv="Content-Security-Policy"
content="require-trusted-types-for 'script';"
/>
<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;
}
.observer-test {
display: flex;
width: 100px;
height: 32px;
overflow-y: auto;
background-color: rgba(0, 0, 0, 0.1);
}
.observer-test > div {
margin-top: 100px;
}
.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;
height: 24px;
color: #000;
}
50% {
width: 128px;
height: 64px;
color: #800;
}
100% {
width: 24px;
height: 24px;
color: #000;
}
}
</style>
<script>
// 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',
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>
<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" />',
},
animated: {
body: '<g stroke="currentColor" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 8L7.13 14" stroke-dasharray="10" stroke-dashoffset="10"><animate fill="freeze" attributeName="stroke-dashoffset" dur="0.18s" values="10;0"></animate></path><path d="M5.5 16L2 13" stroke-dasharray="8" stroke-dashoffset="8"><animate fill="freeze" attributeName="stroke-dashoffset" dur="0.2s" values="8;0" begin="0.2s"></animate></path></g>',
width: 14,
height: 24,
},
},
});
})();
</script>
</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"
width="2em"
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"
width="2em"
></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>
Flip (4 icons, repeated 3 times with different mode attribute):
<iconify-icon inline icon="test:icon"></iconify-icon>
<iconify-icon inline icon="test:icon" mode="svg"></iconify-icon>
<iconify-icon inline icon="test:icon" mode="style"></iconify-icon>
<iconify-icon
inline
icon="test:icon"
flip="horizontal"
></iconify-icon>
<iconify-icon
inline
icon="test:icon"
flip="horizontal"
mode="svg"
></iconify-icon>
<iconify-icon
inline
icon="test:icon"
flip="horizontal"
mode="style"
></iconify-icon>
<iconify-icon
inline
icon="test2:icon"
flip="vertical"
></iconify-icon>
<iconify-icon
inline
icon="test2:icon"
flip="vertical"
mode="svg"
></iconify-icon>
<iconify-icon
inline
icon="test2:icon"
flip="vertical"
mode="style"
></iconify-icon>
<iconify-icon
inline
icon="test2:icon"
flip="horizontal,vertical"
></iconify-icon>
<iconify-icon
inline
icon="test2:icon"
flip="horizontal,vertical"
mode="svg"
></iconify-icon>
<iconify-icon
inline
icon="test2:icon"
flip="horizontal,vertical"
mode="style"
></iconify-icon>
</p>
<p>
Non-square animated icon (with border):
<iconify-icon
inline
icon="test2:animated"
mode="style"
style="border: 1px solid #ccc"
></iconify-icon>
<iconify-icon
inline
icon="test2:animated"
mode="svg"
style="border: 1px solid #ccc"
></iconify-icon>
</p>
<p>
Making icon square with attributes (with border):
<iconify-icon
width="1em"
height="1em"
icon="test2:animated"
mode="style"
style="border: 1px solid #ccc"
></iconify-icon>
<iconify-icon
width="1em"
height="1em"
icon="test2:animated"
mode="svg"
style="border: 1px solid #ccc"
></iconify-icon>
<iconify-icon
width="1em"
height="1em"
icon="cif:ee"
mode="style"
style="border: 1px solid #ccc"
></iconify-icon>
<iconify-icon
width="1em"
height="1em"
icon="cif:ee"
mode="svg"
style="border: 1px solid #ccc"
></iconify-icon>
</p>
<p>
Making icon square with style (with border):
<iconify-icon
icon="test2:animated"
mode="style"
style="width: 1em; height: 1em; border: 1px solid #ccc"
></iconify-icon>
<iconify-icon
icon="test2:animated"
mode="svg"
style="width: 1em; height: 1em; border: 1px solid #ccc"
></iconify-icon>
<iconify-icon
icon="cif:ee"
mode="style"
style="width: 1em; height: 1em; border: 1px solid #ccc"
></iconify-icon>
<iconify-icon
icon="cif:ee"
mode="svg"
style="width: 1em; height: 1em; border: 1px solid #ccc"
></iconify-icon>
</p>
<h2>Hidden icons, appear on scroll</h2>
<div class="observer-test">
<div>
<!-- should not render when not visible -->
<iconify-icon
icon="test2:icon"
flip="horizontal,vertical"
mode="style"
></iconify-icon>
<!-- should always render: attribute is boolean, value does not matter -->
<iconify-icon
noobserver
icon="test2:icon"
flip="horizontal,vertical"
mode="style"
></iconify-icon>
<iconify-icon
noobserver="false"
icon="test2:icon"
flip="horizontal,vertical"
mode="style"
></iconify-icon>
</div>
</div>
<h2>Scale icon</h2>
<p>Using height="none" and CSS, animating width/height and color</p>
<div class="unset-size">
<iconify-icon
icon="bi:person-lines-fill"
height="none"
mode="svg"
></iconify-icon>
<iconify-icon
icon="bi:person-lines-fill"
height="unset"
mode="style"
></iconify-icon>
</div>
</body>
</html>
View Git Blame Copy Permalink