Improve some Plyr icons

[mrleblanc101]

Current Behavior:

Hi 👋 I know the Plyr layout is made to be identical to the Plyr package, which Vidstack aim to replace, but I think it should still get fix that were never merged in Plyr to behind with.

Some of the icons in Plyr are just wrong.

Expected Behavior:

My biggest pet-pieve is the seek forward, and seek backward icons, which look like a fast forward/rewind or next/previous track. https://github.com/sampotts/plyr/issues/2107

Current:

Proposed: (We can make them generic by removing the time if needed)

Also, the Picture-in-picture icon doesn't match what people would expect from a PiP icon.

Current:

Proposed:

Reproduction Link: [How to create a repro?][repro]

[repro]: https://github.com/vidstack/player/blob/main/.github/REPRO.md

[mrleblanc101]

I see Vidstack has a much easier way to overrides some icons without generating an entirely new spritesheet:

const customIcons: PlyrLayoutIcons = {
  AirPlay: AirPlayIcon,
  CaptionsOff: CaptionsOffIcon,
  CaptionsOn: CaptionsOnIcon,
  Download: DownloadIcon,
  EnterFullscreen: EnterFullscreenIcon,
  ExitFullscreen: ExitFullscreenIcon,
  EnterPiP: EnterPiPIcon,
  ExitPiP: ExitPiPIcon,
  FastForward: FastForwardIcon,
  Muted: MutedIcon,
  Pause: PauseIcon,
  Play: PlayIcon,
  Restart: RestartIcon,
  Rewind: RewindIcon,
  Settings: SettingsIcon,
  Volume: VolumeIcon,
};

<PlyrLayout icons={customIcons} />

But it would still make for a great enhancement !