feat(svg-icons): handle custom svg icons

[amtins]

Description

Replace the player's default icons with custom icons.

The experimentalSvgIcons option accepts a boolean or a string. If the string represents a valid svg, it will replace the default icons.

Usage

import playerIcons from './asset/vjs-sprite-icons.svg';

const player = videojs('my-player', {
  experimentalSvgIcons: playerIcons,
  // ...
});

Or:

const player = videojs('my-player', {
  experimentalSvgIcons: `
  <svg>
  ...
  </svg>
  `,
  // ...
});

Specific Changes proposed

• extract a initSvgIcons_ function to activate svg icons
• add test cases

Requirements Checklist

• Feature implemented / Bug fixed
• If necessary, more likely in a feature request than a bug fix
  • Change has been verified in an actual browser (Chrome, Firefox, IE)
  • Unit Tests updated or fixed
  • Docs/guides updated
  • Example created (starter template on JSBin)
• Reviewed by Two Core Contributors

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 82.72%. Comparing base (d535e16) to head (0c9ae3c).
⚠️ Report is 180 commits behind head on main.

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #8488      +/-   ##
==========================================
+ Coverage   82.71%   82.72%   +0.01%     
==========================================
  Files         113      113              
  Lines        7589     7594       +5     
  Branches     1826     1827       +1     
==========================================
+ Hits         6277     6282       +5     
  Misses       1312     1312              

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[wseymour15]

I think this is a great idea @amtins!

My only real concern is that this leaves the door open for human error. If the ids in the sprite string do not match the ones in our default sprite, we will be missing icons. I don't really view this as a problem, but I think we need to ensure that it is well documented.

On that note, I think we could add to the options guide with this change in functionality, as well as describing (and maybe linking) to the current sprite.

[amtins]

Thanks for your feedback and for taking the time to review this PR.

My only real concern is that this leaves the door open for human error

I couldn't agree more. That's why I created a project to reduce potential human errors (wip). However, I think this project deserves a few improvements in order to enhance the developer experience and have something more like videojs/font, icons.json and material icons