Emit full iconDefinition in selection event details

packages/fa-icon-chooser-react/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@fortawesome/fa-icon-chooser-react",
   "sideEffects": false,
-  "version": "0.7.0",
+  "version": "0.8.0-1",
   "license": "MIT",
   "private": false,
   "description": "React specific wrapper for @fortawesome/fa-icon-chooser",
@@ -35,7 +35,7 @@
     "typescript": "^4.3.2"
   },
   "dependencies": {
-    "@fortawesome/fa-icon-chooser": "0.7.0"
+    "@fortawesome/fa-icon-chooser": "0.8.0-1"
   },
   "peerDependencies": {
     "react": "^16 || ^17 || ^18",

packages/fa-icon-chooser/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fortawesome/fa-icon-chooser",
-  "version": "0.7.0",
+  "version": "0.8.0-1",
   "description": "Font Awesome Icon Chooser",
   "main": "dist/index.cjs.js",
   "private": false,

packages/fa-icon-chooser/src/components.d.ts

@@ -5,12 +5,12 @@
  * It contains typing information for all components that exist in this project.
  */
 import { HTMLStencilElement, JSXBase } from "@stencil/core/internal";
-import { IconChooserResult, IconUpload, UrlTextFetcher } from "./utils/utils";
-import { IconDefinition } from "@fortawesome/fontawesome-common-types";
+import { IconChooserResult, IconDefinition, IconUpload, UrlTextFetcher } from "./utils/utils";
 import { QueryHandler } from "./components/fa-icon-chooser/fa-icon-chooser";
 export namespace Components {
     interface FaIcon {
         "class": string;
+        "emitIconDefinition"?: (iconDefinition: IconDefinition) => void;
         "familyStylePathSegment": string;
         "getUrlText"?: UrlTextFetcher;
         "icon"?: IconDefinition;
@@ -67,6 +67,7 @@ declare global {
 declare namespace LocalJSX {
     interface FaIcon {
         "class"?: string;
+        "emitIconDefinition"?: (iconDefinition: IconDefinition) => void;
         "familyStylePathSegment"?: string;
         "getUrlText"?: UrlTextFetcher;
         "icon"?: IconDefinition;

packages/fa-icon-chooser/src/components/fa-icon-chooser/fa-icon-chooser.tsx

@@ -16,8 +16,9 @@ import {
 } from '../../utils/utils';
 import { faSadTear, faTire } from '../../utils/icons';
 import { slotDefaults } from '../../utils/slots';
+import { IconDefinition } from '../../utils/utils';
 
-export type QueryHandler = (document: string, variables?: object) => Promise<any>;
+export type QueryHandler = (document: string, variables?: object, options?: object) => Promise<any>;
 
 type KitMetadata = {
   version: string;
@@ -278,6 +279,7 @@ export class FaIconChooser {
       }
       `,
       { token: this.kitToken },
+      { cache: true },
     );
 
     if (get(response, 'errors')) {
@@ -297,7 +299,11 @@ export class FaIconChooser {
     }
 
     if (find(iconUploads, i => i.pathData.length > 1)) {
-      kitFamilyStyles.push({ family: 'kit-duotone', style: 'custom', prefix: 'fakd' });
+      kitFamilyStyles.push({
+        family: 'kit-duotone',
+        style: 'custom',
+        prefix: 'fakd',
+      });
     }
 
     if (kitFamilyStyles.length > 0) {
@@ -626,22 +632,34 @@ export class FaIconChooser {
             </article>
           ) : size(this.filteredIcons()) > 0 ? (
             <div class="icon-listing">
-              {this.filteredIcons().map(iconLookup => (
-                <article class="wrap-icon" key={`${iconLookup.prefix}-${iconLookup.iconName}`}>
-                  <button class="icon subtle display-flex flex-column flex-items-center flex-content-center" onClick={() => this.finish.emit(buildIconChooserResult(iconLookup))}>
-                    <fa-icon
-                      {...this.commonFaIconProps}
-                      size="2x"
-                      stylePrefix={iconLookup.prefix}
-                      familyStylePathSegment={this.prefixToFamilyStylePathSegment(iconLookup.prefix)}
-                      name={iconLookup.iconName}
-                      iconUpload={get(iconLookup, 'iconUpload')}
-                    />
-
-                    <span class="icon-name size-sm text-truncate margin-top-lg">{`${iconLookup.iconName}`}</span>
-                  </button>
-                </article>
-              ))}
+              {this.filteredIcons().map(iconLookup => {
+                let iconDefinition = null;
+                const setIconDefinition = (currentIconDefinition: IconDefinition) => {
+                  if ('object' === typeof currentIconDefinition) {
+                    iconDefinition = { ...currentIconDefinition };
+                  }
+                };
+                return (
+                  <article class="wrap-icon" key={`${iconLookup.prefix}-${iconLookup.iconName}`}>
+                    <button
+                      class="icon subtle display-flex flex-column flex-items-center flex-content-center"
+                      onClick={() => this.finish.emit(buildIconChooserResult(iconDefinition))}
+                    >
+                      <fa-icon
+                        {...this.commonFaIconProps}
+                        size="2x"
+                        stylePrefix={iconLookup.prefix}
+                        emitIconDefinition={setIconDefinition}
+                        familyStylePathSegment={this.prefixToFamilyStylePathSegment(iconLookup.prefix)}
+                        name={iconLookup.iconName}
+                        iconUpload={get(iconLookup, 'iconUpload')}
+                      />
+
+                      <span class="icon-name size-sm text-truncate margin-top-lg">{`${iconLookup.iconName}`}</span>
+                    </button>
+                  </article>
+                );
+              })}
             </div>
           ) : (
             <article class="message message-noresults text-center margin-2xl">

packages/fa-icon-chooser/src/components/fa-icon/fa-icon.tsx

@@ -1,6 +1,6 @@
-import { Component, Host, Prop, State, h } from '@stencil/core';
-import { IconUpload, parseSvgText, UrlTextFetcher, CONSOLE_MESSAGE_PREFIX } from '../../utils/utils';
-import { IconDefinition } from '@fortawesome/fontawesome-common-types';
+import { Component, h, Host, Prop, State } from '@stencil/core';
+import { CONSOLE_MESSAGE_PREFIX, IconUpload, parseSvgText, UrlTextFetcher } from '../../utils/utils';
+import { IconDefinition } from '../../utils/utils';
 import { get } from 'lodash';
 
 /**
@@ -13,47 +13,71 @@ import { get } from 'lodash';
   shadow: false,
 })
 export class FaIcon {
-  @Prop() name?: string;
+  @Prop()
+  name?: string;
 
-  @Prop() stylePrefix?: string;
+  @Prop()
+  stylePrefix?: string;
 
-  @Prop() familyStylePathSegment: string;
+  @Prop()
+  familyStylePathSegment: string;
 
-  @Prop() svgApi: any;
+  @Prop()
+  svgApi: any;
 
-  @Prop() pro: boolean = false;
+  @Prop()
+  pro: boolean = false;
 
-  @Prop() iconUpload?: IconUpload;
+  @Prop()
+  iconUpload?: IconUpload;
 
-  @Prop() class: string;
+  @Prop()
+  class: string;
 
-  @Prop() svgFetchBaseUrl?: string;
+  @Prop()
+  svgFetchBaseUrl?: string;
 
-  @Prop() getUrlText?: UrlTextFetcher;
+  @Prop()
+  getUrlText?: UrlTextFetcher;
 
-  @Prop() kitToken?: string;
+  @Prop()
+  kitToken?: string;
 
-  @Prop() icon?: IconDefinition;
+  @Prop()
+  icon?: IconDefinition;
 
-  @Prop() size?: string;
+  @Prop()
+  size?: string;
 
-  @State() loading: boolean = false;
+  @Prop()
+  emitIconDefinition?: (iconDefinition: IconDefinition) => void;
 
-  @State() iconDefinition: any;
+  @State()
+  loading: boolean = false;
+
+  @State()
+  iconDefinition: any;
+
+  setIconDefinition(iconDefinition: IconDefinition): void {
+    this.iconDefinition = iconDefinition;
+    if ('function' === typeof this.emitIconDefinition) {
+      this.emitIconDefinition(iconDefinition);
+    }
+  }
 
   componentWillLoad() {
     if (this.iconUpload) {
-      this.iconDefinition = {
+      this.setIconDefinition({
         prefix: this.stylePrefix,
         iconName: this.iconUpload.name,
         icon: [parseInt(`${this.iconUpload.width}`), parseInt(`${this.iconUpload.height}`), [], this.iconUpload.unicode.toString(16), this.iconUpload.pathData],
-      };
+      });
 
       return;
     }
 
     if (this.icon) {
-      this.iconDefinition = this.icon;
+      this.setIconDefinition(this.icon);
 
       return;
     }
@@ -83,7 +107,7 @@ export class FaIcon {
       });
 
     if (iconDefinition) {
-      this.iconDefinition = iconDefinition;
+      this.setIconDefinition(iconDefinition);
       return;
     }
 
@@ -121,7 +145,7 @@ export class FaIcon {
           icon: parseSvgText(svg),
         };
         library && library.add(iconDefinition);
-        this.iconDefinition = { ...iconDefinition };
+        this.setIconDefinition({ ...iconDefinition });
       })
       .catch(e => {
         console.error(`${CONSOLE_MESSAGE_PREFIX}: fa-icon: failed when using 'getUrlText' to fetch icon`, e, this);

packages/fa-icon-chooser/src/utils/utils.ts

@@ -55,7 +55,11 @@ export interface IconUploadLookup extends IconLookup {
   iconUpload: IconUpload;
 }
 
-export type IconChooserResult = IconLookup;
+export interface IconDefinition extends IconLookup {
+  icon: Array<any>;
+}
+
+export type IconChooserResult = IconLookup | IconDefinition;
 
 const viewBoxRe = /viewBox="0 0 ([0-9]+) ([0-9]+)"/;
 const singlePathRe = /path d="([^"]+)"/;
@@ -133,10 +137,8 @@ export async function createFontAwesomeScriptElement(
   }
 }
 
-export function buildIconChooserResult(iconLookup: IconLookup | IconUploadLookup): IconChooserResult {
-  const { prefix, iconName } = iconLookup;
-
-  return { prefix, iconName };
+export function buildIconChooserResult(iconDefinition: IconDefinition): IconChooserResult {
+  return iconDefinition;
 }
 
 export function isValidSemver(val: string): boolean {