反應SVG渲染問題

我想導入和SVG標誌作爲一個組件，我得到了錯誤，如下面的截圖所示。反應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> 
     ) 
    } 
}

來源

2017-10-05 Filth

SVG在React中不是自動可用的組件，它是SVG標籤的集合。你是否試圖在圖像中使用它？我建議把所有的SVG標籤放在一個單獨的組件中，然後做你自己。 – Li357

@AndrewLi你的意思是將圖像標籤上的svg導入爲「src」？我嘗試過，並呈現。我猜這樣做沒有真正的問題嗎？代碼： – Filth

您需要將SVG轉換爲反應組件。 –

您可以創建一個接受一些道具和爲您創建任何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路徑。

來源

2017-10-05 11:42:18

非常優雅的解決方案，我會試試這個。 – Filth

反應SVG渲染問題

回答

相關問題