如何在 Nuxt 3 应用中使用 spritemap 技术?

huangapple go评论59阅读模式
英文:

How to use spritemap technique in Nuxt 3 application?

问题

以下是您要求的翻译部分:

I have a Nuxt 3 application and I want to use svg spritemap.

That is, put .svg files in the /assests/svg/<name>.svg folder and use them in the application like this:

<svg>
   <use xlink:href="spritemap.svg?#<name>"></use>
</svg>

I found the @nuxtjs/svg plugin but I can't get it to work.
Connecting it as in the documentation, I get an error:

Uncaught (in promise) DOMException: Failed to execute 'createElement' on 'Document': The tag name provided ('/_nuxt/assets/svg/example.svg') is not a valid name.

How can I make a spritemap?

英文:

I have a Nuxt 3 application and I want to use svg spritemap.

That is, put .svg files in the /assests/svg/&lt;name&gt;.svg folder and use them in the application like this:

&lt;svg&gt;
   &lt;use xlink:href=&quot;spritemap.svg?#&lt;name&gt;&quot;&gt;&lt;/use&gt;
&lt;/svg&gt;

I found the @nuxtjs/svg plugin but I can't get it to work.
Connecting it as in the documentation, I get an error:

Uncaught (in promise) DOMException: Failed to execute &#39;createElement&#39; on &#39;Document&#39;: The tag name provided (&#39;/_nuxt/assets/svg/example.svg&#39;) is not a valid name.

How can I make a spritemap?

答案1

得分: 0

在Nuxt中做这个有点困难,但是是可以的。

我在npm上创建了一个MIT库(nuxt-svg-spritemap)来实现这个。阅读README.md以获取更多详细信息。

英文:

It`s hard to do in Nuxt. But it's possible.

I created MIT lib on npm (nuxt-svg-spritemap) for this. Read README.md for more details.

huangapple
  • 本文由 发表于 2023年4月4日 15:01:11
  • 转载请务必保留本文链接:https://go.coder-hub.com/75926379.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定