ReactでパブリックフォルダからSVGを取得する方法


  1. requireを使用する方法: Reactでパブリックフォルダ内のSVGを取得する一般的な方法は、requireを使用することです。以下のコードを参考にしてください。

    import React from 'react';
    const MyComponent = () => {
     const svgPath = require('../public/my-svg.svg').default;
     return (
       <div>
         <img src={svgPath} alt="My SVG" />
       </div>
     );
    };
    export default MyComponent;

    上記の例では、requireを使用してSVGファイルのパスを取得し、img要素のsrc属性に指定して表示しています。requireのパスは、プロジェクトのルートディレクトリからの相対パスで指定します。

  2. publicフォルダへの直接リンク: もう一つの方法は、パブリックフォルダ内のSVGファイルに直接リンクすることです。以下のコードを参考にしてください。

    import React from 'react';
    const MyComponent = () => {
     return (
       <div>
         <img src="/my-svg.svg" alt="My SVG" />
       </div>
     );
    };
    export default MyComponent;

    上記の例では、img要素のsrc属性にSVGファイルのパスを直接指定しています。この方法では、publicフォルダ内のファイルにアクセスできます。

どちらの方法を選んでも、Reactアプリ内でパブリックフォルダのSVGファイルにアクセスできます。適切な方法を選択し、プロジェクトの要件に応じて利用してください。