Custom plyr.io icons

In this example I’m developing a simple play/pause button using svg sprite technique.

const rt = Plyr.setup('.audio', {
    debug: true,
    controls: [
      'play'
    ],
    iconUrl: 'path/sprite.svg',
    iconPrefix: 'audio'
});

The sprite is an svg file that includes an svg icons for play and pause. You need to add the ids to the layers. It’s required by plyr to reference the icons. The sprite.svg file includes the two icons. Example below.

<svg>
  <defs>
    <g id="audio-play">
       <!-- svg content in here -->
    <g>
    <g id="audio-pause">
       <!-- svg content in here -->
    <g>
  </defs>
</svg>

This way the icons are DOM elements, where we’re still able to reference them.