Merge pull request #467 from leviceccato/custom-intercom-icon

Allow using a custom icon for Intercom

Author: benschwarz

README.md

@@ -16,7 +16,6 @@ Made by the team at [♠ Calibre](https://calibreapp.com/), your performance com
 
 Since introducing `react-live-chat-loader` in 2019 we've welcomed the addition of several chat provider tools, with thanks to numerous contributors. As a group the Calibre team have taken this library as far as we can, and we're looking for someone to take the reigns. If you, your buddies or team can help, please create a new issue to start discussion. 💬
 
-
 ## 🖇️ Table of Contents
 
 1. [How it Works](#-how-it-works)
@@ -203,6 +202,7 @@ You can customise the Intercom placeholder icon by passing the following props t
 
 - `color`: The background color of the placeholder widget
 - `containerClass`: Class to be added to the placeholder element, defaults to `live-chat-loader-placeholder`
+- `icon`: Override the default Intercom icon, can be any JSX element.
 
 [Messenger Settings](https://developers.intercom.com/installing-intercom/docs/javascript-api-attributes-objects#messenger-attributes), User context and Company context settings can be set using `window.intercomSettings`. See the [official Intercom documentation](https://developers.intercom.com/installing-intercom/docs/javascript-api-attributes-objects#section-data-attributes) for more details.
 

src/components/Intercom/index.tsx

@@ -1,4 +1,4 @@
-import React, { CSSProperties } from 'react'
+import React, { ReactElement, CSSProperties } from 'react'
 
 import useChat from '../../hooks/useChat'
 import { ProviderProps, ClassNames } from '../../types'
@@ -61,10 +61,12 @@ const styles: {
 
 interface Props extends ProviderProps {
   color?: string
+  icon?: ReactElement
 }
 
 const Intercom = ({
   color = '#333333',
+  icon: Icon,
   containerClass = ClassNames.container
 }: Props): JSX.Element | null => {
   const [state, loadChat] = useChat({ loadWhenIdle: true })
@@ -99,18 +101,21 @@ const Intercom = ({
             opacity: state === 'initial' ? 1 : 0
           }}
         >
-          <svg
-            height="24px"
-            width="24px"
-            focusable="false"
-            aria-hidden="true"
-            viewBox="0 0 28 32"
-          >
-            <path
-              fill="white"
-              d="M28 32s-4.714-1.855-8.527-3.34H3.437C1.54 28.66 0 27.026 0 25.013V3.644C0 1.633 1.54 0 3.437 0h21.125c1.898 0 3.437 1.632 3.437 3.645v18.404H28V32zm-4.139-11.982a.88.88 0 00-1.292-.105c-.03.026-3.015 2.681-8.57 2.681-5.486 0-8.517-2.636-8.571-2.684a.88.88 0 00-1.29.107 1.01 1.01 0 00-.219.708.992.992 0 00.318.664c.142.128 3.537 3.15 9.762 3.15 6.226 0 9.621-3.022 9.763-3.15a.992.992 0 00.317-.664 1.01 1.01 0 00-.218-.707z"
-            ></path>
-          </svg>
+          {
+            Icon ||
+            <svg
+              height="24px"
+              width="24px"
+              focusable="false"
+              aria-hidden="true"
+              viewBox="0 0 28 32"
+            >
+              <path
+                fill="white"
+                d="M28 32s-4.714-1.855-8.527-3.34H3.437C1.54 28.66 0 27.026 0 25.013V3.644C0 1.633 1.54 0 3.437 0h21.125c1.898 0 3.437 1.632 3.437 3.645v18.404H28V32zm-4.139-11.982a.88.88 0 00-1.292-.105c-.03.026-3.015 2.681-8.57 2.681-5.486 0-8.517-2.636-8.571-2.684a.88.88 0 00-1.29.107 1.01 1.01 0 00-.219.708.992.992 0 00.318.664c.142.128 3.537 3.15 9.762 3.15 6.226 0 9.621-3.022 9.763-3.15a.992.992 0 00.317-.664 1.01 1.01 0 00-.218-.707z"
+              ></path>
+            </svg>
+          }
         </div>
         <div
           style={{