js/webawesome
1
0
Fork 0
mirror of https://github.com/shoelace-style/webawesome.git synced 2026-01-12 12:09:26 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add dynamic docs since this is not in alpha

Browse Source
This commit is contained in:
Lea Verou
2025-01-08 10:23:45 -05:00
parent d18edcc941
commit f601b8aaf4
1 changed files with 15 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
docs/docs/components/icon.md
View File

@@ -28,7 +28,8 @@ Many Font Awesome Pro icon families have variants such as `thin`, `light`, `regu
### Setting icon info via CSS
You can set the icon's family, name, and variant via CSS custom properties. This can be useful when you want to set <!-- the icon dynamically or set --> defaults for a group of icons (e.g. icons inside callouts or all icons for a given theme):
You can also set the icon's family, name, and variant via CSS custom properties.
This can be useful when you want to set the icon dynamically (e.g. in response to a CSS pseudo-class or media query) or set defaults for a group of icons (e.g. icons inside callouts or all icons for a given theme).
```html {.example}
<wa-callout>
@@ -46,6 +47,7 @@ You can set the icon's family, name, and variant via CSS custom properties. This
<!-- Look ma, no attributes! -->
<wa-icon slot="icon"></wa-icon>
Here be dragons.
<button id="toggle_icon">Toggle&nbsp;<wa-icon name="circle-exclamation"></wa-icon></button>
</wa-callout>
<style>
@@ -58,6 +60,18 @@ wa-callout {
}
}
</style>
<script>
toggle_icon.addEventListener('click', e => {
let callout = e.target.closest('wa-callout');
let value = callout.style.getPropertyValue('--wa-icon-name').trim();
if (value) {
callout.style.removeProperty('--wa-icon-name');
}
else {
callout.style.setProperty('--wa-icon-name', 'circle-exclamation');
}
});
</script>
```
Notes: