add customIcons props

src/index.tsx

@@ -1,4 +1,4 @@
-import React, { Component, ReactNode, ReactInstance } from 'react'
+import React, { Component, ReactNode, ReactInstance, CSSProperties } from 'react'
 import { Icon } from '@iconify/react'
 import playCircle from '@iconify/icons-mdi/play-circle'
 import pauseCircle from '@iconify/icons-mdi/pause-circle'
@@ -72,15 +72,29 @@ interface PlayerProps {
   ShowFilledProgress?: boolean
   header?: ReactNode
   footer?: ReactNode
+  customIcons: CustomIcons
   children?: ReactNode
-  style?: React.CSSProperties
+  style?: CSSProperties
 }
 
 interface PlayerState {
   isPlaying: boolean
   isLoopEnabled: boolean
 }
 
+interface CustomIcons {
+  play?: ReactNode
+  pause?: ReactNode
+  rewind?: ReactNode
+  forward?: ReactNode
+  previous?: ReactNode
+  next?: ReactNode
+  loop?: ReactNode
+  loopOff?: ReactNode
+  volume?: ReactNode
+  volumeMute?: ReactNode
+}
+
 class H5AudioPlayer extends Component<PlayerProps, PlayerState> {
   static defaultProps: PlayerProps = {
     autoPlay: false,
@@ -102,6 +116,7 @@ class H5AudioPlayer extends Component<PlayerProps, PlayerState> {
     showSkipControls: false,
     showDownloadProgress: true,
     ShowFilledProgress: true,
+    customIcons: {},
   }
 
   state: PlayerState
@@ -328,12 +343,34 @@ class H5AudioPlayer extends Component<PlayerProps, PlayerState> {
       progressUpdateInterval,
       header,
       footer,
+      customIcons,
       children,
       style,
     } = this.props
     const { isPlaying, isLoopEnabled } = this.state
     const { volume = muted ? 0 : volumeProp } = this.audio || {}
 
+    let loopIcon: ReactNode
+    if (isLoopEnabled) {
+      loopIcon = customIcons.loop ? customIcons.loop : <Icon icon={repeat} />
+    } else {
+      loopIcon = customIcons.loopOff ? customIcons.loopOff : <Icon icon={repeatOff} />
+    }
+
+    let actionIcon: ReactNode
+    if (isPlaying) {
+      actionIcon = customIcons.pause ? customIcons.pause : <Icon icon={pauseCircle} />
+    } else {
+      actionIcon = customIcons.play ? customIcons.play : <Icon icon={playCircle} />
+    }
+
+    let volumeIcon: ReactNode
+    if (volume) {
+      volumeIcon = customIcons.volume ? customIcons.volume : <Icon icon={volumeHigh} />
+    } else {
+      volumeIcon = customIcons.volume ? customIcons.volumeMute : <Icon icon={volumeMute} />
+    }
+
     return (
       /* We want the container to catch bubbled events */
       /* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions */
@@ -392,7 +429,7 @@ class H5AudioPlayer extends Component<PlayerProps, PlayerState> {
                 className="rhap_button-clear rhap_repeat-button"
                 onClick={this.handleClickLoopButton}
               >
-                <Icon icon={isLoopEnabled ? repeat : repeatOff} />
+                {loopIcon}
               </button>
             )}
           </div>
@@ -403,7 +440,7 @@ class H5AudioPlayer extends Component<PlayerProps, PlayerState> {
                 className="rhap_button-clear rhap_main-controls-button rhap_skip-button"
                 onClick={onClickPrevious}
               >
-                <Icon icon={skipPrevious} />
+                {customIcons.previous ? customIcons.previous : <Icon icon={skipPrevious} />}
               </button>
             )}
             {showJumpControls && (
@@ -412,23 +449,23 @@ class H5AudioPlayer extends Component<PlayerProps, PlayerState> {
                 className="rhap_button-clear rhap_main-controls-button rhap_rewind-button"
                 onClick={this.handleClickRewind}
               >
-                <Icon icon={rewind} />
+                {customIcons.rewind ? customIcons.rewind : <Icon icon={rewind} />}
               </button>
             )}
             <button
               aria-label={isPlaying ? 'Pause' : 'Play'}
               className="rhap_button-clear rhap_main-controls-button rhap_play-pause-button"
               onClick={this.togglePlay}
             >
-              {isPlaying ? <Icon icon={pauseCircle} /> : <Icon icon={playCircle} />}
+              {actionIcon}
             </button>
             {showJumpControls && (
               <button
                 aria-label="Forward"
                 className="rhap_button-clear rhap_main-controls-button rhap_forward-button"
                 onClick={this.handleClickForward}
               >
-                <Icon icon={fastForward} />
+                {customIcons.forward ? customIcons.forward : <Icon icon={fastForward} />}
               </button>
             )}
             {showSkipControls && (
@@ -437,7 +474,7 @@ class H5AudioPlayer extends Component<PlayerProps, PlayerState> {
                 className="rhap_button-clear rhap_main-controls-button rhap_skip-button"
                 onClick={onClickNext}
               >
-                <Icon icon={skipNext} />
+                {customIcons.next ? customIcons.next : <Icon icon={skipNext} />}
               </button>
             )}
           </div>
@@ -449,7 +486,7 @@ class H5AudioPlayer extends Component<PlayerProps, PlayerState> {
                   onClick={this.handleClickVolumeButton}
                   className="rhap_button-clear rhap_volume-button"
                 >
-                  <Icon icon={volume ? volumeHigh : volumeMute} />
+                  {volumeIcon}
                 </button>
                 <VolumeBar audio={this.audio} volume={volume} onMuteChange={this.handleMuteChange} />
               </div>

stories/layouts.stories.mdx

@@ -114,3 +114,30 @@ Useful for most mobile browsers because they don't support volume control
     <AudioPlayer src={SAMPLE_MP3_URL} header="Now playing: Let it go!" footer="This is a footer" />
   </Story>
 </Preview>
+
+#### Custom icons
+
+Pass custom icons as needed to the props `customIcons`. Below is an example to use custom play icon for the audio player.
+
+```
+CustomIcons {
+  play?: ReactNode
+  pause?: ReactNode
+  rewind?: ReactNode
+  forward?: ReactNode
+  previous?: ReactNode
+  next?: ReactNode
+  loop?: ReactNode
+  loopOff?: ReactNode
+  volume?: ReactNode
+  volumeMute?: ReactNode
+}
+```
+
+export const sampleIcon = (<svg role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>asciinema icon</title><path d="M1.61 0V24L22.39 12L1.61 0M5.76 7.2L10.06 9.68L5.76 12.16V7.2M12.55 11.12L14.08 12L5.76 16.8V15.04L12.55 11.12Z"></path></svg>)
+
+<Preview>
+  <Story name="Custom icons">
+    <AudioPlayer src={SAMPLE_MP3_URL} defaultCurrentTime="Loading" defaultDuration="Loading" customIcons={{ play: sampleIcon }} />
+  </Story>
+</Preview>