@@ -76,7 +80,7 @@ For supportive icon families, use the `variant` attribute to set the variant.
For non-decorative icons, use the `label` attribute to announce it to assistive devices.
```html {.example}
-
+
```
### Sizing
@@ -100,7 +104,7 @@ By default, icons have a 1em height and a fixed 1em width. Use the `auto-width`
```html {.example}
Without auto-width
-
+
@@ -112,7 +116,7 @@ Without auto-width
With auto-width
-
+
@@ -127,7 +131,7 @@ With auto-width
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}
-
+
@@ -145,7 +149,7 @@ Note that these custom properties will not inherit and _must be applied directly
```html {.example}
-
+
-
+
-
+
-
+
-
+
@@ -317,7 +321,7 @@ Normal duotone
Swapped duotone
-
+
@@ -333,7 +337,7 @@ If you're a [Font Awesome Pro+ customer](https://fontawesome.com/), you have acc
Notdog
-
+
Chisel
-
Etch
-
Jelly
-
+
Slab
-
+
@@ -382,7 +386,7 @@ If you're a [Font Awesome Pro+ customer](https://fontawesome.com/), you have acc
Thumbprint
-
diff --git a/packages/webawesome/src/components/icon/icon.css b/packages/webawesome/src/components/icon/icon.css
index 2252be8c3..bac395ab3 100644
--- a/packages/webawesome/src/components/icon/icon.css
+++ b/packages/webawesome/src/components/icon/icon.css
@@ -4,19 +4,28 @@
--secondary-color: currentColor;
--secondary-opacity: 0.4;
+ box-sizing: content-box;
display: inline-flex;
+ align-items: center;
justify-content: center;
- box-sizing: content-box !important;
+ vertical-align: -0.125em;
+}
+
+/* Standard */
+:host(:not([auto-width])) {
+ width: 1.25em;
+ height: 1em;
+}
+
+/* Auto-width */
+:host([auto-width]) {
width: auto;
height: 1em;
}
svg {
- display: inline-block;
- width: auto;
- height: inherit;
+ height: 1em;
fill: currentColor;
- /* This prevents cropped SVGs from being cut off */
overflow: visible;
/* Duotone colors with path-specific opacity fallback */
diff --git a/packages/webawesome/src/components/icon/icon.test.ts b/packages/webawesome/src/components/icon/icon.test.ts
index 6ec2de6ef..57259328c 100644
--- a/packages/webawesome/src/components/icon/icon.test.ts
+++ b/packages/webawesome/src/components/icon/icon.test.ts
@@ -133,17 +133,6 @@ describe('
', () => {
});
describe('negative cases', () => {
- // using new library so we can test for malformed icons when registered
- it("svg not rendered with an icon that doesn't exist in the library", async () => {
- const el = await fixture(html` `);
-
- // Still renders svgs for empty icons.
- expect(el.shadowRoot?.querySelector('svg')).to.be.instanceof(SVGElement);
-
- expect(el.getBoundingClientRect().height).to.equal(16);
- expect(el.getBoundingClientRect().width).to.equal(16);
- });
-
it('emits wa-error when the file cant be retrieved', async () => {
const el = await fixture(html` `);
const listener = oneEvent(el, 'wa-error') as Promise;
diff --git a/packages/webawesome/src/components/icon/library.default.ts b/packages/webawesome/src/components/icon/library.default.ts
index a1b90c407..e1aa5d47f 100644
--- a/packages/webawesome/src/components/icon/library.default.ts
+++ b/packages/webawesome/src/components/icon/library.default.ts
@@ -3,8 +3,7 @@ import type { IconLibrary } from './library.js';
const FA_VERSION = '7.0.0';
-function getIconUrl(name: string, family: string, variant: string, autoWidth: boolean) {
- const basePath = autoWidth ? 'svgs' : 'svgs-full';
+function getIconUrl(name: string, family: string, variant: string) {
const kitCode = getKitCode();
const isPro = kitCode.length > 0;
let folder = 'solid';
@@ -90,14 +89,14 @@ function getIconUrl(name: string, family: string, variant: string, autoWidth: bo
// Use the default CDN
return isPro
- ? `https://ka-p.fontawesome.com/releases/v${FA_VERSION}/${basePath}/${folder}/${name}.svg?token=${encodeURIComponent(kitCode)}`
- : `https://ka-f.fontawesome.com/releases/v${FA_VERSION}/${basePath}/${folder}/${name}.svg`;
+ ? `https://ka-p.fontawesome.com/releases/v${FA_VERSION}/svgs/${folder}/${name}.svg?token=${encodeURIComponent(kitCode)}`
+ : `https://ka-f.fontawesome.com/releases/v${FA_VERSION}/svgs/${folder}/${name}.svg`;
}
const library: IconLibrary = {
name: 'default',
- resolver: (name: string, family = 'classic', variant = 'solid', autoWidth = false) => {
- return getIconUrl(name, family, variant, autoWidth);
+ resolver: (name: string, family = 'classic', variant = 'solid') => {
+ return getIconUrl(name, family, variant);
},
mutator: (svg, hostEl) => {
// Duotone families