font-awesome-for-phaser 0.5.2 → 0.7.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 +14 -39
- package/dist/components/icon-text.d.ts +2 -0
- package/dist/components/icon-text.d.ts.map +1 -1
- package/dist/components/icon-text.js +18 -4
- package/dist/components/icon-text.js.map +1 -1
- package/dist/constants/icons.d.ts +5941 -3462
- package/dist/constants/icons.d.ts.map +1 -1
- package/dist/constants/icons.js +1918 -1731
- package/dist/constants/icons.js.map +1 -1
- package/dist/utils/get-icon-char.d.ts +2 -0
- package/dist/utils/get-icon-char.d.ts.map +1 -1
- package/dist/utils/get-icon-char.js +6 -0
- package/dist/utils/get-icon-char.js.map +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -16,54 +16,22 @@ yarn add font-awesome-for-phaser
|
|
|
16
16
|
|
|
17
17
|
First, you must have the free font awesome imported in your page.
|
|
18
18
|
|
|
19
|
-
```
|
|
20
|
-
<!-- As HTML -->
|
|
21
|
-
<link
|
|
22
|
-
rel="preload"
|
|
23
|
-
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.0/webfonts/fa-solid-900.woff2"
|
|
24
|
-
as="font"
|
|
25
|
-
type="font/woff2"
|
|
26
|
-
crossorigin
|
|
27
|
-
/>
|
|
28
|
-
<link
|
|
29
|
-
rel="preload"
|
|
30
|
-
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.0/webfonts/fa-regular-400.woff2"
|
|
31
|
-
as="font"
|
|
32
|
-
type="font/woff2"
|
|
33
|
-
crossorigin
|
|
34
|
-
/>
|
|
35
|
-
<link
|
|
36
|
-
rel="preload"
|
|
37
|
-
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.0/webfonts/fa-brands-400.woff2"
|
|
38
|
-
as="font"
|
|
39
|
-
type="font/woff2"
|
|
40
|
-
crossorigin
|
|
41
|
-
/>
|
|
42
|
-
```
|
|
43
|
-
|
|
44
|
-
> **Note:** Browsers only load a web font the first time it is requested. This means that, in Phaser, the very first time you display a Font Awesome icon, you may see a missing character (the "tofu" box) instead of the correct icon. After the font is loaded, subsequent icons will display correctly.
|
|
45
|
-
|
|
46
|
-
To avoid this issue, it is recommended to preload the font files using the `<link rel="preload" ...>` tags shown above **and** to call `loadFont()` before your game starts. This ensures the font is available when Phaser tries to render the icons, preventing the "tofu" character from appearing.
|
|
47
|
-
|
|
48
|
-
Or, you can use our auto import
|
|
49
|
-
|
|
50
|
-
```typescript
|
|
19
|
+
```ts
|
|
51
20
|
import { loadFont } from 'font-awesome-for-phaser';
|
|
21
|
+
import type Phaser from 'phaser';
|
|
22
|
+
|
|
23
|
+
const config: Phaser.Types.Core.GameConfig = {
|
|
24
|
+
//......
|
|
25
|
+
};
|
|
52
26
|
|
|
53
27
|
loadFont().then(() => {
|
|
54
|
-
const config: Phaser.Types.Core.GameConfig = {
|
|
55
|
-
// .....
|
|
56
|
-
};
|
|
57
28
|
new Game(config);
|
|
58
|
-
})
|
|
29
|
+
})
|
|
59
30
|
|
|
60
31
|
// or
|
|
61
32
|
async function startGame() {
|
|
62
33
|
await loadFont();
|
|
63
34
|
|
|
64
|
-
const config: Phaser.Types.Core.GameConfig = {
|
|
65
|
-
// .....
|
|
66
|
-
};
|
|
67
35
|
new Game(config);
|
|
68
36
|
}
|
|
69
37
|
```
|
|
@@ -82,6 +50,8 @@ const iconText = scene.add.text(0, 0, char, {
|
|
|
82
50
|
font: `36px 'FontAwesome'`, // IMPORTANT! The name of the font MUST BE between char ('), if you use `font: '36px FontAwesome', won't work
|
|
83
51
|
color: '#ffffff',
|
|
84
52
|
});
|
|
53
|
+
// PS: The font should be 'FontAwesome', or 'Font Awesome 7 Free' or 'Font Awesome 7 Brands'. Depends of the char
|
|
54
|
+
|
|
85
55
|
iconText.setOrigin(0.5);
|
|
86
56
|
scene.add.existing(iconText);
|
|
87
57
|
|
|
@@ -91,8 +61,13 @@ import { IconText } from 'font-awesome-for-phaser';
|
|
|
91
61
|
// PS: `this` is the scene
|
|
92
62
|
const icon = new IconText(this, 90, 90, 'gamepad', 64, {
|
|
93
63
|
color: '#0066cc',
|
|
64
|
+
iconStyle: 'solid', // 'solid' | 'regular' | 'brands';
|
|
94
65
|
});
|
|
95
66
|
this.add.existing(icon); // Don't forget to add in scene
|
|
96
67
|
```
|
|
97
68
|
|
|
98
69
|
<img src="data/image.png" alt="example of button">
|
|
70
|
+
|
|
71
|
+
You can see more icons in our [storybook](https://renatocassino.github.io/phaser-toolkit/?path=/story/font-awesome-for-phaser-icontext--basic).
|
|
72
|
+
|
|
73
|
+
<img src="data/storybook.png" alt="storybook example" />
|
|
@@ -23,12 +23,14 @@ export type IconTextParams = {
|
|
|
23
23
|
*/
|
|
24
24
|
export declare class IconText extends Phaser.GameObjects.Text {
|
|
25
25
|
private currentIconStyle;
|
|
26
|
+
private icon;
|
|
26
27
|
constructor({ scene, x, y, icon, size, style, iconStyle, }: IconTextParams);
|
|
27
28
|
setIcon(icon: IconKey, opts?: {
|
|
28
29
|
iconStyle?: IconStyle;
|
|
29
30
|
}): void;
|
|
30
31
|
setIconStyle(iconStyle: IconStyle): void;
|
|
31
32
|
getIconStyle(): IconStyle;
|
|
33
|
+
getIcon(): IconKey;
|
|
32
34
|
private applyIconStyle;
|
|
33
35
|
}
|
|
34
36
|
//# sourceMappingURL=icon-text.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"icon-text.d.ts","sourceRoot":"","sources":["../../src/components/icon-text.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,QAAQ,CAAC;AAE5B,OAAO,EAAE,KAAK,OAAO,EAAE,MAAM,oBAAoB,CAAC;AAGlD,MAAM,MAAM,SAAS,GAAG,OAAO,GAAG,SAAS,GAAG,QAAQ,CAAC;AAEvD,MAAM,MAAM,cAAc,GAAG;IAC3B,KAAK,EAAE,MAAM,CAAC,KAAK,CAAC;IACpB,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,IAAI,EAAE,OAAO,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC,KAAK,CAAC,WAAW,CAAC,IAAI,CAAC,SAAS,CAAC;IAChD,SAAS,CAAC,EAAE,SAAS,CAAC;CACvB,CAAC;AAEF;;;;;;;;;;GAUG;AACH,qBAAa,QAAS,SAAQ,MAAM,CAAC,WAAW,CAAC,IAAI;IACnD,OAAO,CAAC,gBAAgB,CAAsB;
|
|
1
|
+
{"version":3,"file":"icon-text.d.ts","sourceRoot":"","sources":["../../src/components/icon-text.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,QAAQ,CAAC;AAE5B,OAAO,EAAE,KAAK,OAAO,EAAE,MAAM,oBAAoB,CAAC;AAGlD,MAAM,MAAM,SAAS,GAAG,OAAO,GAAG,SAAS,GAAG,QAAQ,CAAC;AAEvD,MAAM,MAAM,cAAc,GAAG;IAC3B,KAAK,EAAE,MAAM,CAAC,KAAK,CAAC;IACpB,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,IAAI,EAAE,OAAO,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC,KAAK,CAAC,WAAW,CAAC,IAAI,CAAC,SAAS,CAAC;IAChD,SAAS,CAAC,EAAE,SAAS,CAAC;CACvB,CAAC;AAEF;;;;;;;;;;GAUG;AACH,qBAAa,QAAS,SAAQ,MAAM,CAAC,WAAW,CAAC,IAAI;IACnD,OAAO,CAAC,gBAAgB,CAAsB;IAC9C,OAAO,CAAC,IAAI,CAAU;gBAEV,EACV,KAAK,EACL,CAAC,EACD,CAAC,EACD,IAAI,EACJ,IAAS,EACT,KAAU,EACV,SAAmB,GACpB,EAAE,cAAc;IAaV,OAAO,CAAC,IAAI,EAAE,OAAO,EAAE,IAAI,CAAC,EAAE;QAAE,SAAS,CAAC,EAAE,SAAS,CAAA;KAAE,GAAG,IAAI;IAQ9D,YAAY,CAAC,SAAS,EAAE,SAAS,GAAG,IAAI;IAIxC,YAAY,IAAI,SAAS;IAIzB,OAAO,IAAI,OAAO;IAIzB,OAAO,CAAC,cAAc;CAwBvB"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import Phaser from 'phaser';
|
|
2
|
-
import { getIconChar } from '../utils';
|
|
2
|
+
import { getIconChar, getIconStyles } from '../utils';
|
|
3
3
|
/**
|
|
4
4
|
* IconText is a Phaser Text GameObject that displays Font Awesome icons
|
|
5
5
|
* By default, the origin is set to (0.5, 0.5). To change it, use setOrigin() method
|
|
@@ -13,17 +13,20 @@ import { getIconChar } from '../utils';
|
|
|
13
13
|
*/
|
|
14
14
|
export class IconText extends Phaser.GameObjects.Text {
|
|
15
15
|
currentIconStyle = 'solid';
|
|
16
|
+
icon;
|
|
16
17
|
constructor({ scene, x, y, icon, size = 16, style = {}, iconStyle = 'solid', }) {
|
|
17
18
|
super(scene, x, y, getIconChar(icon), {
|
|
18
19
|
fontSize: `${size}px`,
|
|
19
20
|
...style,
|
|
20
21
|
});
|
|
22
|
+
this.icon = icon;
|
|
21
23
|
this.currentIconStyle = iconStyle;
|
|
22
24
|
this.applyIconStyle(this.currentIconStyle);
|
|
23
25
|
this.setOrigin(0.5, 0.5);
|
|
24
26
|
}
|
|
25
27
|
setIcon(icon, opts) {
|
|
26
28
|
this.setText(getIconChar(icon));
|
|
29
|
+
this.icon = icon;
|
|
27
30
|
if (opts?.iconStyle) {
|
|
28
31
|
this.applyIconStyle(opts.iconStyle);
|
|
29
32
|
}
|
|
@@ -34,20 +37,31 @@ export class IconText extends Phaser.GameObjects.Text {
|
|
|
34
37
|
getIconStyle() {
|
|
35
38
|
return this.currentIconStyle;
|
|
36
39
|
}
|
|
40
|
+
getIcon() {
|
|
41
|
+
return this.icon;
|
|
42
|
+
}
|
|
37
43
|
applyIconStyle(iconStyle) {
|
|
44
|
+
let newIconStyle = iconStyle;
|
|
45
|
+
const availableStyles = getIconStyles(this.icon);
|
|
46
|
+
if (!availableStyles.has(iconStyle)) {
|
|
47
|
+
const newStyle = [...availableStyles][0];
|
|
48
|
+
// eslint-disable-next-line no-console
|
|
49
|
+
console.warn(`Icon ${this.icon} does not support style "${iconStyle}", using "${newStyle}" instead. Available styles: ${Array.from([...availableStyles].map(style => `"${style}"`)).join(', ')}`);
|
|
50
|
+
newIconStyle = newStyle;
|
|
51
|
+
}
|
|
38
52
|
// Font Awesome v7:
|
|
39
53
|
// - Free Regular (400) and Free Solid (900) share family "Font Awesome 6 Free"
|
|
40
54
|
// - Brands (400) uses family "Font Awesome 6 Brands"
|
|
41
|
-
if (
|
|
55
|
+
if (newIconStyle === 'brands') {
|
|
42
56
|
this.setFontFamily("'Font Awesome 7 Brands'");
|
|
43
57
|
this.setFontStyle('normal');
|
|
44
58
|
}
|
|
45
59
|
else {
|
|
46
60
|
this.setFontFamily("'Font Awesome 7 Free'");
|
|
47
61
|
// Use bold for solid, normal for regular. Bold maps to the closest available weight (900 for solid)
|
|
48
|
-
this.setFontStyle(
|
|
62
|
+
this.setFontStyle(newIconStyle === 'solid' ? 'bold' : 'normal');
|
|
49
63
|
}
|
|
50
|
-
this.currentIconStyle =
|
|
64
|
+
this.currentIconStyle = newIconStyle;
|
|
51
65
|
}
|
|
52
66
|
}
|
|
53
67
|
//# sourceMappingURL=icon-text.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"icon-text.js","sourceRoot":"","sources":["../../src/components/icon-text.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,QAAQ,CAAC;AAG5B,OAAO,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;
|
|
1
|
+
{"version":3,"file":"icon-text.js","sourceRoot":"","sources":["../../src/components/icon-text.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,QAAQ,CAAC;AAG5B,OAAO,EAAE,WAAW,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AActD;;;;;;;;;;GAUG;AACH,MAAM,OAAO,QAAS,SAAQ,MAAM,CAAC,WAAW,CAAC,IAAI;IAC3C,gBAAgB,GAAc,OAAO,CAAC;IACtC,IAAI,CAAU;IAEtB,YAAY,EACV,KAAK,EACL,CAAC,EACD,CAAC,EACD,IAAI,EACJ,IAAI,GAAG,EAAE,EACT,KAAK,GAAG,EAAE,EACV,SAAS,GAAG,OAAO,GACJ;QACf,KAAK,CAAC,KAAK,EAAE,CAAC,EAAE,CAAC,EAAE,WAAW,CAAC,IAAI,CAAC,EAAE;YACpC,QAAQ,EAAE,GAAG,IAAI,IAAI;YACrB,GAAG,KAAK;SACT,CAAC,CAAC;QAEH,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;QAEjB,IAAI,CAAC,gBAAgB,GAAG,SAAS,CAAC;QAClC,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAC;QAC3C,IAAI,CAAC,SAAS,CAAC,GAAG,EAAE,GAAG,CAAC,CAAC;IAC3B,CAAC;IAEM,OAAO,CAAC,IAAa,EAAE,IAAgC;QAC5D,IAAI,CAAC,OAAO,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC,CAAC;QAChC,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;QACjB,IAAI,IAAI,EAAE,SAAS,EAAE,CAAC;YACpB,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;QACtC,CAAC;IACH,CAAC;IAEM,YAAY,CAAC,SAAoB;QACtC,IAAI,CAAC,cAAc,CAAC,SAAS,CAAC,CAAC;IACjC,CAAC;IAEM,YAAY;QACjB,OAAO,IAAI,CAAC,gBAAgB,CAAC;IAC/B,CAAC;IAEM,OAAO;QACZ,OAAO,IAAI,CAAC,IAAI,CAAC;IACnB,CAAC;IAEO,cAAc,CAAC,SAAoB;QACzC,IAAI,YAAY,GAAG,SAAS,CAAC;QAC7B,MAAM,eAAe,GAAG,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QACjD,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,SAAS,CAAC,EAAE,CAAC;YACpC,MAAM,QAAQ,GAAG,CAAC,GAAG,eAAe,CAAC,CAAC,CAAC,CAAc,CAAC;YACtD,sCAAsC;YACtC,OAAO,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,4BAA4B,SAAS,aAAa,QAAQ,gCAAgC,KAAK,CAAC,IAAI,CAAC,CAAC,GAAG,eAAe,CAAC,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE,CAAC,IAAI,KAAK,GAAG,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;YAClM,YAAY,GAAG,QAAQ,CAAC;QAC1B,CAAC;QAED,mBAAmB;QACnB,+EAA+E;QAC/E,qDAAqD;QACrD,IAAI,YAAY,KAAK,QAAQ,EAAE,CAAC;YAC9B,IAAI,CAAC,aAAa,CAAC,yBAAyB,CAAC,CAAC;YAC9C,IAAI,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC;QAC9B,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,aAAa,CAAC,uBAAuB,CAAC,CAAC;YAC5C,oGAAoG;YACpG,IAAI,CAAC,YAAY,CAAC,YAAY,KAAK,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC;QAClE,CAAC;QAED,IAAI,CAAC,gBAAgB,GAAG,YAAY,CAAC;IACvC,CAAC;CACF"}
|