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

add support for fixed width

Browse Source
This commit is contained in:
Cory LaViska
2024-06-11 10:51:49 -04:00
parent db94c609bd
commit 55ba270b83
2 changed files with 69 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/icon/icon.styles.ts
View File

@@ -8,6 +8,10 @@ export default css`
box-sizing: content-box !important;
}
:host[fixed-width] {
width: 1em;
}
svg {
display: block;
height: 100%;

127
src/components/icon/icon.ts
View File

@@ -41,6 +41,71 @@ export default class WaIcon extends WebAwesomeElement {
private initialRender = false;
@state() private svg: SVGElement | HTMLTemplateResult | null = null;
/** The name of the icon to draw. Available names depend on the icon library being used. */
@property({ reflect: true }) name?: string;
/**
* The family of icons to choose from. For Font Awesome, valid options include `classic`, `sharp`, `duotone`, and
* `brands`. Custom icon libraries may or may not use this property.
*/
@property({ reflect: true }) family: string;
/**
* The name of the icon's variant. For Font Awesome, valid options include `thin`, `light`, `regular`, and `solid` for
* the _classic_ and _sharp_ families. Custom icon libraries may or may not use this property.
*/
@property({ reflect: true }) variant: string;
/** Draws the icon in a fixed-width both. */
@property({ attribute: 'fixed-width', type: Boolean, reflect: true }) fixedWidth: false;
/**
* An external URL of an SVG file. Be sure you trust the content you are including, as it will be executed as code and
* can result in XSS attacks.
*/
@property() src?: string;
/**
* An alternate description to use for assistive devices. If omitted, the icon will be considered presentational and
* ignored by assistive devices.
*/
@property() label = '';
/** The name of a registered custom icon library. */
@property({ reflect: true }) library = 'default';
connectedCallback() {
super.connectedCallback();
watchIcon(this);
}
firstUpdated() {
this.initialRender = true;
this.setIcon();
}
disconnectedCallback() {
super.disconnectedCallback();
unwatchIcon(this);
}
private getIconSource(): IconSource {
const library = getIconLibrary(this.library);
if (this.name && library) {
return {
url: library.resolver(this.name, this.family, this.variant),
fromLibrary: true
};
}
return {
url: this.src,
fromLibrary: false
};
}
/** Given a URL, this function returns the resulting SVG element or an appropriate error symbol. */
private async resolveIcon(url: string, library?: IconLibrary): Promise<SVGResult> {
let fileData: Response;
@@ -90,68 +155,6 @@ export default class WaIcon extends WebAwesomeElement {
}
}
@state() private svg: SVGElement | HTMLTemplateResult | null = null;
/** The name of the icon to draw. Available names depend on the icon library being used. */
@property({ reflect: true }) name?: string;
/**
* The family of icons to choose from. For Font Awesome, valid options include `classic`, `sharp`, `duotone`, and
* `brands`. Custom icon libraries may or may not use this property.
*/
@property({ reflect: true }) family: string;
/**
* The name of the icon's variant. For Font Awesome, valid options include `thin`, `light`, `regular`, and `solid` for
* the _classic_ and _sharp_ families. Custom icon libraries may or may not use this property.
*/
@property({ reflect: true }) variant: string;
/**
* An external URL of an SVG file. Be sure you trust the content you are including, as it will be executed as code and
* can result in XSS attacks.
*/
@property() src?: string;
/**
* An alternate description to use for assistive devices. If omitted, the icon will be considered presentational and
* ignored by assistive devices.
*/
@property() label = '';
/** The name of a registered custom icon library. */
@property({ reflect: true }) library = 'default';
connectedCallback() {
super.connectedCallback();
watchIcon(this);
}
firstUpdated() {
this.initialRender = true;
this.setIcon();
}
disconnectedCallback() {
super.disconnectedCallback();
unwatchIcon(this);
}
private getIconSource(): IconSource {
const library = getIconLibrary(this.library);
if (this.name && library) {
return {
url: library.resolver(this.name, this.family, this.variant),
fromLibrary: true
};
}
return {
url: this.src,
fromLibrary: false
};
}
@watch('label')
handleLabelChange() {
const hasLabel = typeof this.label === 'string' && this.label.length > 0;