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は外部コンテナです。シンプルまたは複雑なシェイプ（円：など）は、svgパスとして定義できます。