SVG renders on Chrome Mobile Emulation but not on Phone-CodePudding

This is how I declare my SVG element: I use Vue 2.0 and vue-feather icons for this

<vue-feather
type="globe"
size="calc(1rem   3vmin)"
stroke="var(--dark-accentcolor)"
stroke-linecap="square"
stroke-width="1"
/>

This is how the element looks like in inspect:

<svg data-v-4d521fc4="" xmlns="http://www.w3.org/2000/svg" width="calc(1rem   3vmin)" height="calc(1rem   3vmin)" viewBox="0 0 24 24" fill="none" stroke="var(--dark-accentcolor)" stroke-width="1" stroke-linecap="square" stroke-linejoin="round" ><circle cx="12" cy="12" r="10"></circle><line x1="2" y1="12" x2="22" y2="12"></line><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"></path>
</svg>

As the title says, the SVGs work fine on Desktop browsers and any emulation that I apply to it. When I open the Website on my phones(all of them) all "vue-feather" elements seem to fail to render and just leave an empty box.

I tried using multiple different mobile browsers such as Mozilla, Safari and Chrome but none seem to render it.

The SVG icons were rendering when I first included them and stopped working after 2-3 hours as I wrote more code.

CodePudding user response：

I have not found an answer to this. I uninstalled vue-feather and decided to paste feather-icon svg's into my own vue files which I then used in my project.