hamletmun
commented
2 months ago It would be nice to add an inline SVG and use it as source of iconSprite
...
<svg style="display:none" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<symbol id="icon-play" viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg"><path d="M16.5 8.5c.3.1.4.5.2.8-.1.1-.1.2-.2.2l-11.4 7c-.5.3-.8.1-.8-.5V2c0-.5.4-.8.8-.5l11.4 7z"/></symbol>
<symbol id="icon-pause" viewBox="0 0 14 16" xmlns="http://www.w3.org/2000/svg"><path d="M1,0H3.2a.94.94,0,0,1,1,1V15a.94.94,0,0,1-1,1H1a.94.94,0,0,1-1-1V1A1,1,0,0,1,1,0Zm9.8,0H13a.94.94,0,0,1,1,1V15a.94.94,0,0,1-1,1H10.8a.94.94,0,0,1-1-1V1A1,1,0,0,1,10.8,0Z"/></symbol>
</svg>
...
<script>
document.getElementById("mep_0-icon-play").innerHTML='<use href="#icon-play"></use>'
document.getElementById("mep_0-icon-pause").innerHTML='<use href="#icon-pause"></use>'
...
</script>
Enhancing the functionality of the iconSprite configuration in the library to accept not only the path to the icon as a string but also the entire SVG content as a string would be highly beneficial.
This adjustment is sought due to challenges posed by Content Security Policy (CSP) when utilizing the library mediaelement.js within a Vue component library. Currently, we have configured the iconSprite directly within our source code. This configuration is then utilized across various frontends through npm installation. However, this setup triggers CSP errors in the frontends.
In light of these issues, introducing the capability for the library to handle raw SVG content directly would simplify the integration process and mitigate CSP-related problems.
Is it feasible to explore the development of such a feature? Your insights and collaboration on this matter would be greatly appreciated.