{% endblock %}
-
+
{% block beforeContent %}{% endblock %}
{% block content %}
diff --git a/packages/webawesome/docs/_layouts/blank.njk b/packages/webawesome/docs/_layouts/blank.njk
index 3ed480880..152308538 100644
--- a/packages/webawesome/docs/_layouts/blank.njk
+++ b/packages/webawesome/docs/_layouts/blank.njk
@@ -1,5 +1,5 @@
-
+
{% include 'head.njk' %}
{% block head %}{% endblock %}
diff --git a/packages/webawesome/docs/assets/scripts/code-examples.js b/packages/webawesome/docs/assets/scripts/code-examples.js
index a1956fadf..04f21dc85 100644
--- a/packages/webawesome/docs/assets/scripts/code-examples.js
+++ b/packages/webawesome/docs/assets/scripts/code-examples.js
@@ -56,7 +56,7 @@ document.addEventListener('click', event => {
const code = codeExample.querySelector('code');
const cdnUrl = document.documentElement.dataset.cdnUrl;
const html =
- `\n` +
+ `\n` +
`\n\n` +
`${code.textContent}`;
const css = 'html > body {\n padding: 2rem !important;\n}';
diff --git a/packages/webawesome/docs/docs/components/icon.md b/packages/webawesome/docs/docs/components/icon.md
index ab926fd7e..7477bd5e8 100644
--- a/packages/webawesome/docs/docs/components/icon.md
+++ b/packages/webawesome/docs/docs/components/icon.md
@@ -17,49 +17,51 @@ Not sure which icon to use? [Find the perfect icon over at Font Awesome!](https:
The default icon library is Font Awesome Free, which comes with two icon families: `classic` and `brands`. Use the `family` attribute to set the icon family.
-Many Font Awesome Pro icon families have variants such as `thin`, `light`, `regular`, and `solid`. Font Awesome Pro users can [provide their kit code](/docs/#using-font-awesome-kit-codes) to unlock additional families, including `sharp`, `duotone`, and `sharp-duotone`. For these icon families, use the `variant` attribute to set the variant.
+Many Font Awesome Pro icon families have variants such as `thin`, `light`, `regular`, and `solid`. Font Awesome Pro users can [provide their kit code](/docs/#using-font-awesome-kit-codes) to unlock additional premium icon families, including `sharp`, `duotone`, `sharp-duotone`, and additional Pro+ icon packs.
+
+For supportive icon families, use the `variant` attribute to set the variant.
```html {.example}
-
+
Classic
-
+
-
+
Duotone
-
+
-
+
Sharp
-
+
-
+
Sharp Duotone
-
+
-
+
Brands
-
+
@@ -69,35 +71,12 @@ Many Font Awesome Pro icon families have variants such as `thin`, `light`, `regu
```
-### Colors
+### Labels
-Icons inherit their color from the current text color. Thus, you can set the `color` property on the `` element or an ancestor to change the color.
+For non-decorative icons, use the `label` attribute to announce it to assistive devices.
```html {.example}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
```
### Sizing
@@ -105,7 +84,7 @@ Icons inherit their color from the current text color. Thus, you can set the `co
Icons are sized relative to the current font size. To change their size, set the `font-size` property on the icon itself or on a parent element as shown below.
```html {.example}
-
+
@@ -115,27 +94,322 @@ Icons are sized relative to the current font size. To change their size, set the
```
-### Fixed Width Icons
+### Auto Width
-By default, icons have a 1em height and a variable width. Use the `fixed-width` attribute to render the host element in a 1em by 1em box.
+By default, icons have a 1em height and a fixed 1em width. Use the `auto-width` attribute to allow the icon to use its natural variable width.
```html {.example}
-
-
-
-
-
-
+Without auto-width
+
+
+
+
+
+
+
+
+
+
+
+With auto-width
+
+
+
+
+
+
+
+
```
-### Labels
+### Colors
-For non-decorative icons, use the `label` attribute to announce it to assistive devices.
+Icons inherit their color from the current text color. Thus, you can set the `color` property on the `` element or an ancestor to change the color.
```html {.example}
-
+
+
+
+
+
+
+
+
```
+### Duotone
+
+Font Awesome's [Duotone icons](https://docs.fontawesome.com/web/style/duotone) change with the `color` property as well, but you can customize the primary and secondary colors independently using the `--primary-color` and `--secondary-color` custom properties. To change the opacity of either, use `--primary-opacity` and `--secondary-opacity`.
+
+Note that these custom properties will not inherit and _must be applied directly to the icon_.
+
+```html {.example}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+:::info
+Duotone icons can be unlocked by [providing a valid Font Awesome kit code](/docs/#using-font-awesome-kit-codes).
+:::
+
+### Swap Duotone Opacity
+
+For duotone icons, you can swap the primary and secondary opacity values using the `swap-opacity` attribute. This is useful when you want to emphasize the secondary layer of the icon.
+
+```html {.example}
+Normal duotone
+
+
+
+
+
+
+
+
+
+Swapped duotone
+
+
+
+
+
+
+```
+
+### Font Awesome Pro+
+
+If you're a [Font Awesome Pro+ customer](https://fontawesome.com/), you have access to even more premium icons! Just set the appropriate `family`, `variant`, and `name` on the icon.
+
+```html {.example}
+
+```
+
+:::info
+Pro+ icons can be unlocked by [providing a valid Font Awesome kit code](/docs/#using-font-awesome-kit-codes).
+:::
+
### Custom Icons
Custom icons can be loaded individually with the `src` attribute. Only SVGs on a local or CORS-enabled endpoint are supported. If you're using more than one custom icon, it might make sense to register a [custom icon library](#icon-libraries).
@@ -329,7 +603,9 @@ Icons in this library are licensed under the [MIT License](https://github.com/lu
import { registerIconLibrary } from '/dist/webawesome.js';
registerIconLibrary('iconoir', {
- resolver: name => `https://cdn.jsdelivr.net/gh/lucaburgio/iconoir@latest/icons/${name}.svg`,
+ resolver: (name, family) => {
+ return `https://cdn.jsdelivr.net/npm/iconoir@7.11.0/icons/regular/${name}.svg`;
+ },
mutator: svg =>
svg.querySelectorAll('path').forEach(path => {
path.setAttribute('fill', 'none');
@@ -339,7 +615,7 @@ Icons in this library are licensed under the [MIT License](https://github.com/lu
-
+
diff --git a/packages/webawesome/docs/docs/index.md b/packages/webawesome/docs/docs/index.md
index b1b62f36f..484e8ae23 100644
--- a/packages/webawesome/docs/docs/index.md
+++ b/packages/webawesome/docs/docs/index.md
@@ -32,7 +32,7 @@ Now you can [start using Web Awesome!](/docs/usage)
## Using Font Awesome Kit Codes
-Font Awesome users can set their kit code to unlock Font Awesome Pro icons. You can provide it by adding the `data-fa-kit-code` attribute to any element on the page, or by calling the `setKitCode()` method.
+Font Awesome users can provide their kit code to unlock premium icon packs. You can provide yours by adding the `data-fa-kit-code` attribute to any element on the page, or by calling the `setKitCode()` method.
```html
@@ -45,6 +45,10 @@ Font Awesome users can set their kit code to unlock Font Awesome Pro icons. You
```
+:::info
+Not a Font Awesome user yet? [Learn more about premium icon packs](https://fontawesome.com/) and sign up for an account to unlock them!
+:::
+
---
{# This looks weird, but without it, markdownItAttrs flags the raw calls incorrectly. #}
diff --git a/packages/webawesome/docs/docs/resources/changelog.md b/packages/webawesome/docs/docs/resources/changelog.md
index 3a57f8332..48144a4ad 100644
--- a/packages/webawesome/docs/docs/resources/changelog.md
+++ b/packages/webawesome/docs/docs/resources/changelog.md
@@ -10,6 +10,12 @@ Components with the Experimental badge sh
## Next
+### Bug Fixes and Improvements {data-no-outline}
+
+- 🚨 BREAKING: Updated `` to use Font Awesome 7 [pr:1222]
+ - Added the `auto-width` attribute to automatically size icons, since FA7 is fixed-width by default now
+ - Improved support for duotone icons in ``, including custom colors, custom opacity, and opacity swapping
+ - Removed the `fixed-width` attribute as it's now the default behavior
- Added the Hindi translation [pr:1307]
- Fixed incorrectly named exported tooltip parts in `` [pr:1277]
- Fixed a bug in `` that caused menus to overflow the viewport instead of resizing [issue:1267]
diff --git a/packages/webawesome/docs/examples/themes/showcase.njk b/packages/webawesome/docs/examples/themes/showcase.njk
index 99e6c6905..7b1675035 100644
--- a/packages/webawesome/docs/examples/themes/showcase.njk
+++ b/packages/webawesome/docs/examples/themes/showcase.njk
@@ -3,7 +3,7 @@ unlisted: true
layout: false
---
-
+
@@ -304,15 +304,15 @@ layout: false