@fluid-topics/ftds-icon 2.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +33 -0
- package/build/define.d.ts +1 -0
- package/build/define.js +3 -0
- package/build/definitions.d.ts +5 -0
- package/build/definitions.js +4 -0
- package/build/ftds-icon.d.ts +13 -0
- package/build/ftds-icon.js +55 -0
- package/build/ftds-icon.light.js +585 -0
- package/build/ftds-icon.min.js +742 -0
- package/build/ftds-icon.properties.d.ts +11 -0
- package/build/ftds-icon.properties.js +6 -0
- package/build/ftds-icon.styles.d.ts +4 -0
- package/build/ftds-icon.styles.js +26 -0
- package/build/ftds-icons-definition.d.ts +4 -0
- package/build/ftds-icons-definition.js +295 -0
- package/build/ftds-icons.d.ts +265 -0
- package/build/ftds-icons.js +530 -0
- package/build/index.d.ts +5 -0
- package/build/index.js +5 -0
- package/package.json +30 -0
package/README.md
ADDED
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
The design system icon component
|
|
2
|
+
|
|
3
|
+
## Install
|
|
4
|
+
|
|
5
|
+
```shell
|
|
6
|
+
npm install @fluid-topics/ftds-icon
|
|
7
|
+
yarn add @fluid-topics/ftds-icon
|
|
8
|
+
```
|
|
9
|
+
|
|
10
|
+
## Usage
|
|
11
|
+
|
|
12
|
+
```typescript
|
|
13
|
+
import {html} from "lit"
|
|
14
|
+
import "@fluid-topics/ftds-icon"
|
|
15
|
+
|
|
16
|
+
function render() {
|
|
17
|
+
return html`
|
|
18
|
+
<ftds-icon icon="regular-tablet-landscape"></ftds-icon>
|
|
19
|
+
`
|
|
20
|
+
}
|
|
21
|
+
```
|
|
22
|
+
|
|
23
|
+
Define icon fonts as follows:
|
|
24
|
+
|
|
25
|
+
```html
|
|
26
|
+
|
|
27
|
+
<html>
|
|
28
|
+
<head>
|
|
29
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fluid-topics/ft-icon/assets/font-definitions.css">
|
|
30
|
+
</head>
|
|
31
|
+
...
|
|
32
|
+
</html>
|
|
33
|
+
```
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
package/build/define.js
ADDED
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import { ElementDefinitionsMap, FtLitElement } from "@fluid-topics/ft-wc-utils";
|
|
2
|
+
import { FtdsIconProperties, FtdsIconVariants } from "./ftds-icon.properties";
|
|
3
|
+
import { FtdsIcons } from "./ftds-icons";
|
|
4
|
+
export declare class FtdsIcon extends FtLitElement implements FtdsIconProperties {
|
|
5
|
+
static elementDefinitions: ElementDefinitionsMap;
|
|
6
|
+
static styles: import("lit").CSSResult[];
|
|
7
|
+
variant?: FtdsIconVariants;
|
|
8
|
+
icon?: FtdsIcons;
|
|
9
|
+
monospace: boolean;
|
|
10
|
+
ariaHidden: string;
|
|
11
|
+
protected render(): import("lit-html").TemplateResult<1>;
|
|
12
|
+
private buildIcon;
|
|
13
|
+
}
|
|
@@ -0,0 +1,55 @@
|
|
|
1
|
+
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
|
|
2
|
+
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
|
|
3
|
+
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
|
|
4
|
+
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
|
|
5
|
+
return c > 3 && r && Object.defineProperty(target, key, r), r;
|
|
6
|
+
};
|
|
7
|
+
import { html } from "lit";
|
|
8
|
+
import { property } from "lit/decorators.js";
|
|
9
|
+
import { FtLitElement, } from "@fluid-topics/ft-wc-utils";
|
|
10
|
+
import { unsafeHTML } from "lit/directives/unsafe-html.js";
|
|
11
|
+
import { classMap } from "lit/directives/class-map.js";
|
|
12
|
+
import { dsStyles } from "./ftds-icon.styles";
|
|
13
|
+
import { all } from "./ftds-icons-definition";
|
|
14
|
+
import { icon, library, } from "@fortawesome/fontawesome-svg-core";
|
|
15
|
+
import { faPrefixByVariant, } from "./ftds-icons";
|
|
16
|
+
export class FtdsIcon extends FtLitElement {
|
|
17
|
+
constructor() {
|
|
18
|
+
super(...arguments);
|
|
19
|
+
this.monospace = false;
|
|
20
|
+
this.ariaHidden = "true";
|
|
21
|
+
}
|
|
22
|
+
render() {
|
|
23
|
+
const classes = {
|
|
24
|
+
"ftds-icon": true,
|
|
25
|
+
"ftds-icon--monospace": this.monospace,
|
|
26
|
+
};
|
|
27
|
+
return html `
|
|
28
|
+
<div class="${classMap(classes)}">${unsafeHTML(this.buildIcon())}</div>
|
|
29
|
+
`;
|
|
30
|
+
}
|
|
31
|
+
buildIcon() {
|
|
32
|
+
const faPrefix = this.variant ? faPrefixByVariant[this.variant] : undefined;
|
|
33
|
+
const iconDef = all.find((icon) => icon.iconName === this.icon && (faPrefix ? icon.prefix === faPrefix : true));
|
|
34
|
+
if (!iconDef) {
|
|
35
|
+
console.log(`Attempted usage of unknown ftds-icon : ${this.icon}/${this.variant}`);
|
|
36
|
+
return "";
|
|
37
|
+
}
|
|
38
|
+
library.add(iconDef);
|
|
39
|
+
return icon(iconDef).html[0];
|
|
40
|
+
}
|
|
41
|
+
}
|
|
42
|
+
FtdsIcon.elementDefinitions = {};
|
|
43
|
+
FtdsIcon.styles = dsStyles;
|
|
44
|
+
__decorate([
|
|
45
|
+
property()
|
|
46
|
+
], FtdsIcon.prototype, "variant", void 0);
|
|
47
|
+
__decorate([
|
|
48
|
+
property()
|
|
49
|
+
], FtdsIcon.prototype, "icon", void 0);
|
|
50
|
+
__decorate([
|
|
51
|
+
property({ type: Boolean })
|
|
52
|
+
], FtdsIcon.prototype, "monospace", void 0);
|
|
53
|
+
__decorate([
|
|
54
|
+
property({ reflect: true, attribute: "aria-hidden" })
|
|
55
|
+
], FtdsIcon.prototype, "ariaHidden", void 0);
|