SVGイメージのフォルダ全体（またはそれらを動的にロードする方法）をReact Web Appにインポートするにはどうすればいいですか？

Question

私は：itemNameをとり、イメージを含むhtmlバンドルを吐き出すコンポーネントを持っています。イメージはバンドルごとに異なります。ここで

は、私が持っているものです。

import React, { Component } from 'react'; 
import { NavLink } from 'react-router-dom'; 

import SVGInline from "react-svg-inline"; 

export default (props) => (
    <NavLink className="hex" activeClassName="active" to={'/hex/' + props.itemName}> {React.createElement(SVGInline, {svg: props.itemName})} </NavLink> 
) 

は、どのように私は、このコンポーネントの作品を作ることができますか？

は私が

import SVGInline from "react-svg-inline"; 
import SASSSVG from "./images/sass.svg"; 

<NavLink className="hex" activeClassName="active" to="/hex/sass"><SVGInline svg={ SASSSVG } /></NavLink> 

これは働くだろう...私はちょうど明示的にすべての私のイメージをインポートした場合、私はちょうどそのように私の画像を呼び出すことができることを知っているが、私は〜60 svgsを含める必要があるため、それが追加されますたくさんの余分なコード。

はまた、私は

import * as IconID from './icons'; 

... in this questionこのコードを発見したしかし、それは（それが問題ではなく、答えの一部であった）動作するようには思えない、と答えは少しも非特異的でした私が求めている質問に答える。

私はまたthis questionを見つけましたが、回答よりも多くの質問を持っている回答があります（承認されていませんが）。だから、反応-SVGをインストールした後、私は、ページを見つけることができません求めていただけでその質問のOPとして、答えはそうのように動作するかどうかを確認するためのテスト...

import React, { Component } from 'react'; 
import ReactDOM from 'react-dom' 
import { NavLink } from 'react-router-dom'; 
import ReactSVG from 'react-svg' 

export default (props) => (
    <NavLink className="hex" activeClassName="active" to={'/hex/' + props.itemName}> 
    <ReactSVG 
     path={"images/" + props.itemName + ".svg"} 
     callback={svg => console.log(svg)} 
     className="example" 
    /> 
    </NavLink> 
) 

を設定するしかし、私の私の全体のイメージフォルダを私のビルドフォルダにコピーした後でさえ、svg。私はまた "./images/"を試しました

私はちょうど最後の重要な情報を欠いているように感じ、過去の日を検索した後、誰かが私が見逃している部分を特定できることを望んでいました。

Answer 1

は、私はあなたにもWebPACKのを使用している疑いがあります。 es6 importの代わりにrequire.contextを使用できます。ビルド時にwebpackが解決します。

この最初の行はインポートです。私たちはフォルダーから.svgで終わるすべてのファイルを取得します。再帰的フォルダスキャンを行わない場合は、2番目のパラメータをfalseに変更します。

const svgs = require.context('./images', true, /\.svg$/) 

これは私たちにkeys財産とidプロパティを持つfunctionを与えます。関数にファイルパスを渡してイメージを取得することができます。 keysプロパティは、有効なファイルパスのリストを返します。 idプロパティはw​​ebpackモジュールIDです。 SurviveJS Webpack Dynamic Loading

このapiは限られており、直感的ではないので、より一般的なjavascriptデータ構造に変換して、使いやすくすることができます。ここには役に立つかもしれない3つの例があります。

---

ファイルのみの配列を作成します。パス名でイメージにアクセスする必要がある場合は、keys配列からインデックス番号を取得できます。

const svgs = require.context('./images', true, /\.svg$/) 
const keys = svgs.keys() 

const svgsArray = keys.map(key => svgs(key)) 

各オブジェクトは、1枚の画像

const svgs = require.context('./images', true, /\.svg$/) 

const svgsObjArray = svgs.keys() 
    .map(key => { 
    path: key, 
    file: svg(key), 
    }) 

ため{path, file}であるとパス名が一致するファイルへの鍵であるオブジェクトを作成し、オブジェクトの配列を作成します。

const svgs = require.context('./images', true, /\.svg$/) 

const svgsObj = svgs.keys() 
    .reduce((images, key) => { 
    images[key] = svgs(key) 
    return images 
    }, {}) 

Answer 2

パラメータ "name"（あなたのsvgアイコン名）を受け取り、あなたのsvgコードを返す関数を作ることができます。

import React from 'react' export function getIcon(name){ switch(name) { case 'back': return ( // your svg code here <svg></svg> ) } }

そして、あなたはどこにでもそれをインポートして、単にあなたがしたいアイコン名でそれを呼び出すことができます。

import { getIcon } from './utils' 
render() { 
    return (
    <div> 
    <span>{ getIcon('back') }</span> 
    </div> 
) 
} 

Answer 3

複数のSVGファイルではなく、単一のSVGスプライトを使用できます。

svg-sprite-generate -d images -o images/sprite.svg 

次に、このようにそれを使用します：スプライトがsvg-sprite-generatorを使用してSVGファイルのディレクトリから生成することができ

SVGリアクト使用している場合

import React from 'react'; 
import { NavLink } from 'react-router-dom'; 
import sprite from './images/sprite.svg'; 

export default (props) => (
    <NavLink className="hex" activeClassName="active" to={'/hex/' + props.itemName}> 
    <svg xmlns="http://www.w3.org/2000/svg" width="30" height="30"> 
     <use xlinkHref={`${sprite}#${props.itemName}`} /> 
    </svg> 
    </NavLink> 
) 

Answer 4

ベストな方法は、これはまだで「./utilsは、」私は〜前60のSVGの輸入を持っている必要がありますことを意味し（https://github.com/jhamlet/svg-react-loader）