反应SVG渲染问题

Question

我正在尝试导入SVG徽标作为组件，我收到错误，如下面的屏幕截图所示。

将SVG打开到Web浏览器中，这可以按照预期的那样呈现，但是当我放入我的应用程序时，由于某些原因它不喜欢它。

我唯一注意的是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是外部容器。任何简单或复杂的形状（例如：circle）都可以定义为svg path（s）。