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文件

回答

相關問題