Vue PWA模板,使用SVG精灵

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Vue PWA模板,使用SVG精灵相关的知识,希望对你有一定的参考价值。

我目前正在尝试在vue组件中使用svg sprite,但我根本无法使用它。我现在谷歌搜索几个小时,但找不到有效的解决方案。我已经尝试将svg-loader添加到webpack配置中,但没有任何作用。我只想做的就是:

<svg><use xlink:href="../assets/fa-regular.svg#bars"/></svg>

但我总是为'fa-regular.svg'获得404。我错过了什么?我甚至不知道从哪里开始。这是一个vue-loader问题吗? Webpack问题?

也许有人遇到了类似的问题。

问候

答案

来自https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/xlink:href

SVG 2删除了对xlink命名空间的需求,因此你应该使用href而不是xlink:href。

试试这个:

<svg><use href="../assets/fa-regular.svg#bars"/></svg>

以上是关于Vue PWA模板,使用SVG精灵的主要内容,如果未能解决你的问题,请参考以下文章

VSCode自定义代码片段——.vue文件的模板

VSCode自定义代码片段1——vue主模板

如果未找到 ID,如何默认 SVG 精灵

VSCode自定义代码片段(vue主模板)

VSCode自定义代码片段2——.vue文件的模板

vscode代码片段生成vue模板