-
-
Notifications
You must be signed in to change notification settings - Fork 574
/
Icon.ts
95 lines (87 loc) · 2.38 KB
/
Icon.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
import {
ColorSignal,
PossibleColor,
SignalValue,
SimpleSignal,
useLogger,
} from '@motion-canvas/core';
import {colorSignal, computed, initial, signal} from '../decorators';
import {Img, ImgProps} from './Img';
export interface IconProps extends ImgProps {
/**
* {@inheritDoc Icon.icon}
*/
icon: SignalValue<string>;
/**
* {@inheritDoc Icon.color}
*/
color?: SignalValue<PossibleColor>;
}
/**
* An Icon Component that provides easy access to over 150k icons.
* See https://icones.js.org/collection/all for all available Icons.
*/
export class Icon extends Img {
/**
* The identifier of the icon.
*
* @remarks
* You can find identifiers on [Icônes](https://icones.js.org).
* They can look like this:
* * `mdi:language-typescript`
* * `ph:anchor-simple-bold`
* * `ph:activity-bold`
*/
@signal()
public declare icon: SimpleSignal<string, this>;
/**
* The color of the icon
*
* @remarks
* Provide the color in one of the following formats:
* * named color like `red`, `darkgray`, …
* * hexadecimal string with # like `#bada55`, `#141414`
* Value can be either RGB or RGBA: `#bada55`, `#bada55aa` (latter is partially transparent)
* The shorthand version (e.g. `#abc` for `#aabbcc` is also possible.)
*
* @defaultValue 'white'
*/
@initial('white')
@colorSignal()
public declare color: ColorSignal<this>;
public constructor(props: IconProps) {
super({
...props,
src: null,
});
}
/**
* Create the URL that will be used as the Image source
* @returns Address to Iconify API for the requested Icon.
*/
@computed()
protected svgUrl(): string {
const iconPathSegment = this.icon().replace(':', '/');
const encodedColorValue = encodeURIComponent(this.color().hex());
// Iconify API is documented here: https://docs.iconify.design/api/svg.html#color
return `https://api.iconify.design/${iconPathSegment}.svg?color=${encodedColorValue}`;
}
/**
* overrides `Image.src` getter
*/
protected getSrc(): string {
return this.svgUrl();
}
/**
* overrides `Image.src` setter to warn the user that the value
* is not used
*/
protected setSrc(src: string | null) {
if (src === null) {
return;
}
useLogger().warn(
"The Icon Component does not accept setting the `src`. If you need access to `src`, use '<Img/>` instead.",
);
}
}