When I attempt to utilize Vue as a standalone script in an HTML file, my inline svg icons are rendered as solid filled squares instead of their intended shapes. This issue persists when using both Vue 2 and Vue 3 as standalone scripts.
Although there are solutions available for Vue's svg problems that involve webpack loader configuration, I am seeking a resolution for the svg issues without any build step, relying solely on Vue as a standalone script.
It is worth mentioning that the icon svg is directly copied from Carbon Design Icons
<!DOCTYPE html>
<html>
<head>
<title>Parcel Sandbox</title>
<meta charset="UTF-8" />
<script src="https://unpkg.com/vue@3"></script>
</head>
<body>
<div id="app">
{{message}}
<svg
id="icon"
xmlns="http://www.w3.org/2000/svg"
width="32"
height="32"
viewBox="0 0 32 32"
>
<defs>
<style>
.cls-1 {
fill: none;
}
</style>
</defs>
<path
d="M16,8a5,5,0,1,0,5,5A5,5,0,0,0,16,8Zm0,8a3,3,0,1,1,3-3A3.0034,3.0034,0,0,1,16,16Z"
/>
<path
d="M16,2A14,14,0,1,0,30,16,14.0158,14.0158,0,0,0,16,2ZM10,26.3765V25a3.0033,3.0033,0,0,1,3-3h6a3.0033,3.0033,0,0,1,3,3v1.3765a11.8989,11.8989,0,0,1-12,0Zm13.9925-1.4507A5.0016,5.0016,0,0,0,19,20H13a5.0016,5.0016,0,0,0-4.9925,4.9258,12,12,0,1,1,15.985,0Z"
/>
<rect
id="_Transparent_Rectangle_"
data-name="<Transparent Rectangle>"
class="cls-1"
width="32"
height="32"
/>
</svg>
</div>
<div>
Icon outside of Vue
<svg
id="icon2"
xmlns="http://www.w3.org/2000/svg"
width="32"
height="32"
viewBox="0 0 32 32"
>
<defs>
<style>
.cls-2 {
fill: none;
}
</style>
</defs>
<path
d="M16,8a5,5,0,1,0,5,5A5,5,0,0,0,16,8Zm0,8a3,3,0,1,1,3-3A3.0034,3.0034,0,0,1,16,16Z"
/>
<path
d="M16,2A14,14,0,1,0,30,16,14.0158,14.0158,0,0,0,16,2ZM10,26.3765V25a3.0033,3.0033,0,0,1,3-3h6a3.0033,3.0033,0,0,1,3,3v1.3765a11.8989,11.8989,0,0,1-12,0Zm13.9925-1.4507A5.0016,5.0016,0,0,0,19,20H13a5.0016,5.0016,0,0,0-4.9925,4.9258,12,12,0,1,1,15.985,0Z"
/>
<rect
id="_Transparent_Rectangle_"
data-name="<Transparent Rectangle>"
class="cls-2"
width="32"
height="32"
/>
</svg>
</div>
</body>
<script>
const { createApp } = Vue;
createApp({
data() {
return {
message: "Hello Vue!"
};
}
}).mount("#app");
</script>
</html>
https://codesandbox.io/s/wonderful-albattani-dxkvdt?file=/index.html:0-2221