React - 呈现导入的.svg文件

我需要呈现.svg文件。我不想使用危险的SetInnerHTML。我能够成功呈现一个SVG，如果我直接复制svg内容并从一个组件渲染它。React - 呈现导入的.svg文件

但是，这不是很可重用。我不想复制每个.svg文件中的内容。我希望能够导入一个svg文件，并将其传递到我的组件，然后将呈现内容。

这是我迄今为止所做的，但它不是呈现我的svg。

我已经创建了一个接受进口SVG文件，这样的组件：

import React from "react"; 

class SvgComponent extends React.Component { 
    constructor(props) { 
    super(props); 
    } 
    render() { 
    return (
    props.svg // this works if I copy my .svg contents here (<svg>....</svg>) 
); 
} 
}; 

SvgComponent.propTypes = { 
    svg: React.PropTypes.string.isRequired, 
}; 

export default SvgComponent;

这里是我如何使用该组件：

import mySvg from './images/mySvg.svg'; 
const Icon = (props) => { 
    return (
    <svgComponent svg={mySvg} /> 
); 
}; 

Icon.propTypes = { 
    icon: React.PropTypes.string.isRequired, 
}; 

export default Icon;

这不起作用 - 它不会在网页上显示我的svg，甚至不会显示在我的网站上。当我检查网页，我看到的是一个空svgComponent：

<svgComponent />

上获得的.svg文件，以显示反应会很大的帮助！

来源

2017-06-19 JAck28

可能的重复[如何使用webpack在我的React组件中直接加载SVG？]（https://stackoverflow.com/questions/30844298/how-do-i-load-svgs-directly-in-my-react-component-using-webpack） – jeffesp

这不是重复的。我不想使用危险的SetInnerHTML。 – JAck28

够公平的。我错过了这部分问题。 – jeffesp

我创建了一个模块来解决这个问题。有了它，您可以加载svg并使用JSX操作其元素，而无需粘贴svg代码。

NPM包：https://www.npmjs.com/package/react-samy-svg

检查毛刺的例子：https://fossil-transport.glitch.me

它使用简单，

<Samy path="path to your svg file"> 
 
    <Proxy select="#Star" fill="red"/> 
 
</Samy>

每当你需要改变一些SVG属性只创建Proxy元素并使用'select'prop（接受CSS s选民）。在代理上设置的所有道具都将作为SVG元素的属性被注销

来源

2017-06-20 17:36:05

谢谢。这会在DOM中加载以下内容，但不显示图像。

– JAck28

我有以下 – JAck28

以下是控制台中的错误：失败的子上下文类型：无效的子类上下文'svg'提供给' Samy'，预计'对象'。 – JAck28

React - 呈现导入的.svg文件

回答

相关问题