Dynamic svg xlink:href not rending the icons in browser
Under the assumption that you are using Webpack:
@/assets/ui-icons.svg is a relative URI, that is presumably processed by resolve-url-loader to resolve to the true URI of the SVG file when your website is transpiled. However, resolve-url-loader runs at transpile-time only, and here you have this URI inside of a Vue binding (:xlink:href), which is changed at run-time, and thus resolve-url-loader cannot fix it. Try doing this instead:
<svg class="w-4 h-4 fill-current text-blue-500 mb-2 mx-auto"> <use class="h-4 w-4" :xlink:href="require('@/assets/ui-icons.svg') + `#${tab.name}`"></use></svg>The require() call will invoke resolve-url-loader and resolve to your SVG file, while the rest will link to the specific item in that SVG file that you want to reference. If you have other loaders specified for SVG then you will need to override them, like this:
require('!resolve-url-loader!@/assets/ui-icons.svg')