反应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路径。