feat(svg-icons): handle custom svg icons #8488
Conversation
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**
```javascript
import playerIcons from './asset/vjs-sprite-icons.svg';
const player = videojs('my-player', {
experimentalSvgIcons: playerIcons,
// ...
});
```
Or:
```javascript
const player = videojs('my-player', {
experimentalSvgIcons: `
<svg>
...
</svg>
`,
// ...
});
```
- extract a `initSvgIcons_` function to activate svg icons
- add test cases
Codecov ReportAll modified and coverable lines are covered by tests ✅
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. 🚀 New features to boost your workflow:
|
There was a problem hiding this comment.
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.
|
Thanks for your feedback and for taking the time to review this PR.
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 |
Description
Replace the player's default icons with custom icons.
The
experimentalSvgIconsoption accepts abooleanor astring. If the string represents a valid svg, it will replace the default icons.Usage
Or:
Specific Changes proposed
initSvgIcons_function to activate svg iconsRequirements Checklist