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

Fix icon sizes for FA7 (#1345)

Browse Source 
* fix icon sizes for FA7

* update test to reflect new size

* fix icons for real

* update tests
This commit is contained in:
Cory LaViska
2025-08-20 15:14:07 -04:00
committed by GitHub
parent fd08d4f227
commit fa51cff947
4 changed files with 45 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

53
packages/webawesome/docs/docs/components/icon.md
View File

@@ -7,6 +7,10 @@ category: Imagery
Web Awesome comes bundled with over 2,000 free icons courtesy of [Font Awesome](https://fontawesome.com/). These icons are part of the `default` icon library. Font Awesome Pro users can unlock additional icon families. Or, if you prefer, you can register your own [custom icon library](#icon-library).
```html {.example}
<wa-icon name="face-awesome" variant="light" label="Awesome" style="font-size: 2em;"></wa-icon>
```
:::info
Not sure which icon to use? [Find the perfect icon over at Font Awesome!](https://fontawesome.com/search?o=r&m=free&f=brands%2Cclassic)
:::
@@ -25,7 +29,7 @@ For supportive icon families, use the `variant` attribute to set the variant.
<div class="wa-stack wa-gap-xl">
<div class="wa-flank" style="--flank-size: 12ch;">
<span>Classic</span>
<div class="wa-cluster" style="font-size: 2em;">
<div class="wa-cluster" style="font-size: 1.5em;">
<wa-icon name="eyedropper"></wa-icon>
<wa-icon variant="regular" name="grip-vertical"></wa-icon>
<wa-icon variant="light" name="play"></wa-icon>
@@ -34,7 +38,7 @@ For supportive icon families, use the `variant` attribute to set the variant.
</div>
<div class="wa-flank" style="--flank-size: 12ch;">
<span>Duotone</span>
<div class="wa-cluster" style="font-size: 2em;">
<div class="wa-cluster" style="font-size: 1.5em;">
<wa-icon family="duotone" name="eyedropper"></wa-icon>
<wa-icon family="duotone" variant="regular" name="grip-vertical"></wa-icon>
<wa-icon family="duotone" variant="light" name="play"></wa-icon>
@@ -43,7 +47,7 @@ For supportive icon families, use the `variant` attribute to set the variant.
</div>
<div class="wa-flank" style="--flank-size: 12ch;">
<span>Sharp</span>
<div class="wa-cluster" style="font-size: 2em;">
<div class="wa-cluster" style="font-size: 1.5em;">
<wa-icon family="sharp" name="eyedropper"></wa-icon>
<wa-icon family="sharp" variant="regular" name="grip-vertical"></wa-icon>
<wa-icon family="sharp" variant="light" name="play"></wa-icon>
@@ -52,7 +56,7 @@ For supportive icon families, use the `variant` attribute to set the variant.
</div>
<div class="wa-flank" style="--flank-size: 12ch;">
<span>Sharp Duotone</span>
<div class="wa-cluster" style="font-size: 2em;">
<div class="wa-cluster" style="font-size: 1.5em;">
<wa-icon family="sharp-duotone" name="eyedropper"></wa-icon>
<wa-icon family="sharp-duotone" variant="regular" name="grip-vertical"></wa-icon>
<wa-icon family="sharp-duotone" variant="light" name="play"></wa-icon>
@@ -61,7 +65,7 @@ For supportive icon families, use the `variant` attribute to set the variant.
</div>
<div class="wa-flank" style="--flank-size: 12ch;">
<span>Brands</span>
<div class="wa-cluster" style="font-size: 2em;">
<div class="wa-cluster" style="font-size: 1.5em;">
<wa-icon family="brands" name="font-awesome"></wa-icon>
<wa-icon family="brands" name="web-awesome"></wa-icon>
<wa-icon family="brands" name="github"></wa-icon>
@@ -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}
<wa-icon name="star" label="Favorite" style="font-size: 2em;"></wa-icon>
<wa-icon name="star" label="Favorite" style="font-size: 1.5em;"></wa-icon>
```
### 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<br />
<div style="font-size: 2em; color: #193154;">
<div style="font-size: 1.5em; color: #193154;">
<wa-icon family="solid" name="exclamation" style="background: lightsalmon;"></wa-icon>
<wa-icon family="solid" name="circle-check" style="background: lightsalmon;"></wa-icon>
<wa-icon family="solid" name="input-numeric" style="background: lightsalmon;"></wa-icon>
@@ -112,7 +116,7 @@ Without auto-width<br />
<br />
With auto-width<br />
<div style="font-size: 2em; color: #193154;">
<div style="font-size: 1.5em; color: #193154;">
<wa-icon auto-width family="solid" name="exclamation" style="background: lightsalmon;"></wa-icon>
<wa-icon auto-width family="solid" name="circle-check" style="background: lightsalmon;"></wa-icon>
<wa-icon auto-width family="solid" name="input-numeric" style="background: lightsalmon;"></wa-icon>
@@ -127,7 +131,7 @@ With auto-width<br />
Icons inherit their color from the current text color. Thus, you can set the `color` property on the `<wa-icon>` element or an ancestor to change the color.
```html {.example}
<div class="wa-cluster" style="font-size: 2em;">
<div class="wa-cluster" style="font-size: 1.5em;">
<wa-icon name="strawberry" style="color: salmon;"></wa-icon>
<wa-icon name="crab" style="color: coral;"></wa-icon>
<wa-icon name="sun" style="color: gold;"></wa-icon>
@@ -145,7 +149,7 @@ Note that these custom properties will not inherit and _must be applied directly
```html {.example}
<div class="wa-stack">
<div class="wa-cluster" style="font-size: 2em;">
<div class="wa-cluster" style="font-size: 1.5em;">
<wa-icon
family="duotone"
name="crow"
@@ -178,7 +182,7 @@ Note that these custom properties will not inherit and _must be applied directly
></wa-icon>
</div>
<div class="wa-cluster" style="font-size: 2em;">
<div class="wa-cluster" style="font-size: 1.5em;">
<wa-icon
family="duotone"
variant="regular"
@@ -217,7 +221,7 @@ Note that these custom properties will not inherit and _must be applied directly
></wa-icon>
</div>
<div class="wa-cluster" style="font-size: 2em;">
<div class="wa-cluster" style="font-size: 1.5em;">
<wa-icon
family="duotone"
variant="light"
@@ -256,7 +260,7 @@ Note that these custom properties will not inherit and _must be applied directly
></wa-icon>
</div>
<div class="wa-cluster" style="font-size: 2em;">
<div class="wa-cluster" style="font-size: 1.5em;">
<wa-icon
family="duotone"
variant="thin"
@@ -307,7 +311,7 @@ For duotone icons, you can swap the primary and secondary opacity values using t
```html {.example}
Normal duotone<br />
<div class="wa-cluster" style="font-size: 2em;">
<div class="wa-cluster" style="font-size: 1.5em;">
<wa-icon family="duotone" name="home"></wa-icon>
<wa-icon family="duotone" name="user"></wa-icon>
<wa-icon family="duotone" name="envelope"></wa-icon>
@@ -317,7 +321,7 @@ Normal duotone<br />
<br />
Swapped duotone<br />
<div class="wa-cluster" style="font-size: 2em;">
<div class="wa-cluster" style="font-size: 1.5em;">
<wa-icon family="duotone" name="home" swap-opacity></wa-icon>
<wa-icon family="duotone" name="user" swap-opacity></wa-icon>
<wa-icon family="duotone" name="envelope" swap-opacity></wa-icon>
@@ -333,7 +337,7 @@ If you're a [Font Awesome Pro+ customer](https://fontawesome.com/), you have acc
<div class="wa-stack wa-gap-xl">
<div class="wa-flank" style="--flank-size: 10ch;">
<a href="https://fontawesome.com/icons/packs/notdog" target="_blank">Notdog</a>
<div class="wa-cluster" style="font-size: 2em;">
<div class="wa-cluster" style="font-size: 1.5em;">
<wa-icon family="notdog" variant="solid" name="house"></wa-icon>
<wa-icon
family="notdog"
@@ -346,21 +350,21 @@ If you're a [Font Awesome Pro+ customer](https://fontawesome.com/), you have acc
<div class="wa-flank" style="--flank-size: 10ch;">
<a href="https://fontawesome.com/icons/packs/chisel" target="_blank">Chisel</a>
<div class="wa-cluster" style="font-size: 2em;">
<div class="wa-cluster" style="font-size: 1.5em;">
<wa-icon family="chisel" variant="regular" name="house"></wa-icon>
</div>
</div>
<div class="wa-flank" style="--flank-size: 10ch;">
<a href="https://fontawesome.com/icons/packs/etch" target="_blank">Etch</a>
<div class="wa-cluster" style="font-size: 2em;">
<div class="wa-cluster" style="font-size: 1.5em;">
<wa-icon family="etch" variant="solid" name="house"></wa-icon>
</div>
</div>
<div class="wa-flank" style="--flank-size: 10ch;">
<a href="https://fontawesome.com/icons/packs/jelly" target="_blank">Jelly</a>
<div class="wa-cluster" style="font-size: 2em;">
<div class="wa-cluster" style="font-size: 1.5em;">
<wa-icon family="jelly" variant="regular" name="house"></wa-icon>
<wa-icon
family="jelly"
@@ -374,7 +378,7 @@ If you're a [Font Awesome Pro+ customer](https://fontawesome.com/), you have acc
<div class="wa-flank" style="--flank-size: 10ch;">
<a href="https://fontawesome.com/icons/packs/slab" target="_blank">Slab</a>
<div class="wa-cluster" style="font-size: 2em;">
<div class="wa-cluster" style="font-size: 1.5em;">
<wa-icon family="slab" variant="regular" name="house"></wa-icon>
<wa-icon family="slab" variant="press-regular" name="house"></wa-icon>
</div>
@@ -382,7 +386,7 @@ If you're a [Font Awesome Pro+ customer](https://fontawesome.com/), you have acc
<div class="wa-flank" style="--flank-size: 10ch;">
<a href="https://fontawesome.com/icons/packs/thumbprint" target="_blank">Thumbprint</a>
<div class="wa-cluster" style="font-size: 2em;">
<div class="wa-cluster" style="font-size: 1.5em;">
<wa-icon
family="thumbprint"
variant="light"
@@ -395,12 +399,7 @@ If you're a [Font Awesome Pro+ customer](https://fontawesome.com/), you have acc
<div class="wa-flank" style="--flank-size: 10ch;">
<a href="https://fontawesome.com/icons/packs/whiteboard" target="_blank">Whiteboard</a>
<div class="wa-cluster" style="font-size: 32px;">
<wa-icon
family="whiteboard"
variant="semibold"
name="house"
></wa-icon>
<wa-icon family="whiteboard" variant="semibold" name="house"></wa-icon>
</div>
</div>
</div>

19
packages/webawesome/src/components/icon/icon.css
View File

@@ -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 */

11
packages/webawesome/src/components/icon/icon.test.ts
View File

@@ -133,17 +133,6 @@ describe('<wa-icon>', () => {
});
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<WaIcon>(html` <wa-icon library="test-library" name="does-not-exist"></wa-icon> `);
// 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<WaIcon>(html` <wa-icon library="test-library"></wa-icon> `);
const listener = oneEvent(el, 'wa-error') as Promise<WaErrorEvent>;

11
packages/webawesome/src/components/icon/library.default.ts
View File

@@ -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