如何修复 svg iconmoon 在代码和框上不起作用 [英] How to fix svg iconmoon not working on codesandbox

问题描述

我目前正在尝试在 codeandbox 上的 react 小项目中使用带有use"标签的 iconmoon 图标.不幸的是，您不会在屏幕上看到任何图标.下面是出现问题的链接，第 45 行.

I'm currently trying to use icons from iconmoon with 'use' tag in a react small project on codesandbox. Unfortunately, you won't see any icons on the screen. Below, the link where the problem occurs, line 45.

https://codesandbox.io/s/new-otrs7

我已经尝试将 svg 放在公共文件夹中，并使用 head 内的链接标记引用它.还是不行.

I've already tried to put the svg on public folder and refer to it using link tag inside head. Still does not work.

<use xlinkHref="./img/sprite.svg#icon-react" />

我想要出现反应图标.

先谢谢你！

推荐答案

我通过将 SVG 放在公共目录中，然后在我的模板中执行以下操作，使其适用于 codeandbox.io 上的 Vue 项目:

I got this to work for a Vue project on codesandbox.io by putting the SVG in the public directory and then in my template I did this:

<img src="icon-name.svg" />

这篇关于如何修复 svg iconmoon 在代码和框上不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！