反应SVG渲染问题

Question

我正在尝试将SVG徽标作为一个组件导入，但出现以下屏幕截图所示的错误。

在网络浏览器中打开SVG，可以正常显示，但是放入我的应用程序时由于某种原因它不喜欢它。

我唯一要注意的是SVG的名称-svg的实际名称是“ test.svg”，但是错误将其识别为“ test.5d5d9eef.svg”。 我不确定在哪里或如何生成此数字。

还请注意，组件中的“ SVG”代码是一项测试，以查看是否可以渲染并且确实可以正常渲染。

这是我的代码：

import React from 'react';

import MainLogo from '../../../assets/svg/logos/test.svg';

export default class Logo extends React.Component {
    render() {
        return (
            <div className="logo-wrap col-xs-2">
                <h1>Heading</h1>
                <MainLogo />
                 <svg>
                    <circle cx={50} cy={50} r={10} fill="red" />
                  </svg>
            </div>
        )
    }
}

Answer 1

您可以创建一个通用组件，该组件接受一些道具并为您创建任何SVG，如下所示：

import React from 'react';

export class BuildNewSVG extends React.Component {
constructor(props) {
    super(props);
  }
render() {    
  let bg = props.color || '#000';
  let height = props.height || props.size || '24';
  let width = props.width || props.size || '24';
  let path1 = props.path1 || 'M7 10l5 5 5-5z';
  let path2 = props.path2;
  let fill1 = props.fill1 || '';
  let fill2 = props.fill2 || 'none';
  let viewBox = props.viewBox || '0 0 24 24';

  return (
    <svg fill={bg} className={props.class} height={height} viewBox={viewBox} width={width}>
      <path d={path1} fill={fill1} />
      <path d={path2} fill={fill2} />
    </svg>
  );
}
}

您可以像这样调用组件：

<BuildNewSVG color={'red'} height={'100'} viewBox={'0 0 24 24'} width={'100'} size={'50'}
        path1="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z" path2="M0 0h24v24H0z" fill1={'#ffffff'} fill2={'red'} />

注意：这将是一个通用组件，并且仅接受SVG路径（path1和path2）。 Path2是外部容器。 可以将任何简单或复杂的形状（例如：圆形）定义为svg路径。