在 React 中用内联 svg 替换图像元素

Posted 2023-03-05

【中文标题】在 React 中用内联 svg 替换图像元素

【英文标题】：Replace image element with inline svg in React

【发布时间】：2017-11-01 13:34:00

【问题描述】：

我正在尝试创建一个将图像元素更改为内联 svg 元素的 React 组件。我想这样做，以便我可以从文件中插入 svg 元素，以便使用 css 处理样式。

同样重要的是，我正在为我的项目使用 create-react-app 存储库，并且希望能够在不弹出项目的情况下执行此操作。

变量req 返回一个有效的svg 元素，我设置了this.state.response，然后我尝试更新它，但是很好......它不起作用。使用下面的代码，我得到以下错误：

 A valid React element (or null) must be returned. You may have returned undefined, an array or some other invalid object.

代码：

class Svg extends Component 

constructor(props) 
    super(props);
    this.state = 
        response: undefined
    ;
    this.toSvg(this.props.src);


toSvg(img) 
    const imageUrl = img;
    let self = this;

    // Create new XML Http Request to get data
    let request = new XMLHttpRequest();
    request.open('GET', imageUrl, true);

    request.onreadystatechange = function() 
        if (this.readyState === 4) 
            if ((this.status >= 200) && (this.status < 400)) 
                // Success!
                // Returns the html object
                let req = request.responseXML.getElementsByTagName('svg')[0];

                self.setState(
                    response : req
                );
             else 
                // Error :(
            
        
    ;

    request.send(null);


render() 
    if (this.state.response === undefined) 
        console.log('no response rendering standard img');
        return <img src=this.props.src alt='icon' />;
    
    else 
        console.log('now we update');
        return this.state.response;
    

如果有人知道如何处理 svg 元素以替换 img 元素而不会出现错误，那就太棒了。

【参考方案1】：

使用svg-inline-loader

# add npm package
npm install svg-inline-loader --save-dev

# configure webpack loader

    test: /\.svg$/,
    loader: 'svg-inline-loader'

# using in react code
<InlineSVG src=require("file.svg") />

编辑：

目前在create-react-app 中使用的是url-loader。

因此您可以手动配置文件大小限制以检索 数据 URL：

require("url-loader?limit=10000!./file.svg");

【讨论】：

忘了提到我正在使用 create-react-app 所以希望能够在不弹出我的项目的情况下使用：D 我会更新我的问题

后一种方法在create-react-app中导致如下错误：“Unexpected '!'在 'url-loader?limit=10000!./drawing.svg'. 不要使用 import 语法来配置 webpack loader" import/no-webpack-loader-syntax

【参考方案2】：

最终使用react-svg。

https://www.npmjs.com/package/react-svg

像魅力一样工作。

【参考方案3】：

现在可以在 create-react-app 2.0 中使用特殊的导入语法：

import logoUrl,  ReactComponent as Logo  from './logo.svg';

参考资料：

create-react-app 2 proposal original feature request