1- import {
2- FASTElement ,
3- customElement ,
4- attr ,
5- html
6- } from '@microsoft/fast-element' ;
1+ import { DOM , FASTElement , customElement , attr } from '@microsoft/fast-element' ;
2+ import { iconStyles as styles } from './icon.styles' ;
73
8- const template = html < Icon > `<div :innerHTML="${ x => x . getSvg ( ) } ;
4+ /**
5+ * Icon definition
6+ */
7+ export interface IconDefinition {
8+ /**
9+ * Icon unique name
10+ */
11+ name : string ;
12+ /**
13+ * Icon SVG as string
14+ */
15+ svgStr : string ;
16+ }
917
1018/**
1119 * Icon component
@@ -19,24 +27,24 @@ const template = html<Icon>`<div :innerHTML="${x => x.getSvg()}"></div>`;
1927 */
2028@customElement ( {
2129 name : 'jp-icon' ,
22- template
30+ styles
2331} )
2432export class Icon extends FASTElement {
25- /**
26- * Name of the icon to display.
27- */
28- @attr name : string ;
29-
3033 private static iconsMap = new Map < string , string > ( ) ;
3134 private static _defaultIcon =
32- '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-1-13h2v6h-2zm0 8h2v2h-2z" fill="currentColor"/></svg>' ;
35+ DOM . createHTML ( `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16">
36+ <path
37+ d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-1-13h2v6h-2zm0 8h2v2h-2z"
38+ fill="currentColor"
39+ />
40+ </svg>` ) ;
3341
3442 /**
3543 * Register a new icon.
3644 *
37- * @param options { name: Icon unique name, svgStr: Icon SVG as string }
45+ * @param options Icon definition
3846 */
39- static register ( options : { name : string ; svgStr : string } ) : void {
47+ static register ( options : IconDefinition ) : void {
4048 if ( Icon . iconsMap . has ( options . name ) ) {
4149 console . warn (
4250 `Redefining previously loaded icon svgStr. name: ${
@@ -46,19 +54,19 @@ export class Icon extends FASTElement {
4654 } `
4755 ) ;
4856 }
49- Icon . iconsMap . set ( options . name , options . svgStr ) ;
57+ Icon . iconsMap . set ( options . name , DOM . createHTML ( options . svgStr ) ) ;
5058
5159 // Rerender all existing icons with the same name
5260 document
53- . querySelectorAll ( `jp-icon[name="${ options . name } )
61+ ? .querySelectorAll ( `jp-icon[name="${ options . name } )
5462 . forEach ( ( node : HTMLElement ) => {
5563 node . setAttribute ( 'name' , '' ) ;
5664 node . setAttribute ( 'name' , options . name ) ;
5765 } ) ;
5866 }
5967
6068 /**
61- * Set a new default icon.
69+ * Set the default icon.
6270 *
6371 * @param svgStr The SVG string to be used as the default icon.
6472 */
@@ -76,10 +84,33 @@ export class Icon extends FASTElement {
7684 return Icon . _defaultIcon ;
7785 }
7886
87+ /**
88+ * Name of the icon to display.
89+ */
90+ @attr name : string ;
91+ nameChanged ( ) {
92+ if ( this . shadowRoot ) {
93+ this . shadowRoot . innerHTML = this . getSvg ( ) ;
94+ }
95+ }
96+
97+ /**
98+ * The connected callback for this FASTElement.
99+ * @remarks
100+ * This method is invoked by the platform whenever this FASTElement
101+ * becomes connected to the document.
102+ */
103+ connectedCallback ( ) : void {
104+ super . connectedCallback ( ) ;
105+ this . nameChanged ( ) ;
106+ }
107+
79108 /**
80109 * Get the icon SVG
81110 */
82- getSvg ( ) : string {
111+ protected getSvg ( ) : string {
83112 return Icon . iconsMap . get ( this . name ) ?? Icon . defaultIcon ( ) ;
84113 }
85114}
115+
116+ export { styles as iconStyles } ;
0 commit comments