因此,通常要包含大多数需要简单样式的SVG图标,我会:

<svg>
    <use xlink:href="/svg/svg-sprite#my-icon" />
</svg>

最近,我一直在使用ReactJS,将其作为我新的前端开发堆栈中的一个可能组件进行判断,但我注意到,在其支持的标记/属性列表中,既不支持use也不支持xlink:href.

是否可以使用svg精灵并以这种方式在ReactJS中加载它们?

推荐答案

Update september 2018:此解决方案已被弃用,请改为Jon’s answer.

--

React不支持所有SVG标记,正如您所说,这里有一个支持的标记列表.他们正在寻求更广泛的支持,f.ex在this ticket.

一个常见的解决方法是为不受支持的标记注入HTML,例如:

render: function() {
    var useTag = '<use xlink:href="/svg/svg-sprite#my-icon" />';
    return <svg dangerouslySetInnerHTML={{__html: useTag }} />;
}

Reactjs相关问答推荐

删除表2的收件箱未按预期工作

有正确的方法来设置我的金牛座应用程序的图标吗?

是否将样式应用于父悬停(框架运动)上的子元素?

为什么登录错误和密码在创建Reaction-Hook-Form后立即被删除?

有没有办法在Shopify中显示自定义计算的交货日期?

捕获表单数据时的Reactjs问题

Reaction中的数据加载不一致

如何使用Reaction Testing Library+Vitest正确更新单元测试中的输入?

有没有可能在next.js和ssr中使用tsps?

Next.js 和理智 | npm run build 时预渲染页面/时发生错误

当`useSelector`回调中的属性值更新时,将会使用更新后的值吗?

Recharts 笛卡尔网格 - 垂直线和水平线的不同样式

MUI TextField Select 菜单的最大高度

在复选框中react 检索选中的值

为什么我在此代码段中看不到 useEffect for count = 1?

MUI 卡组件上的文本未正确对齐

如何将 id 从页面传递到另一个页面?

gtag:为什么谷歌分析即使没有被授权也会收集数据

在 Redux 中更新布尔状态时出错

仅react material 表前端分页