javascript - どのようにsvgファイルを取得して使用しますか?

Question

私の質問：

.svgファイルを取得してタグで使用するにはどうすればよいでしょうか?タグを使用した例で行ったのとは異なり<svg>、インタラクティブにスタイルを設定することもできます (ホバーなど) 。<img>

ゴール：

メインルートに各国の国旗を表示するサムネイル ビューを作成する (数は 149)'/'

問題：

Express コードにスタティック ルートを設定したので、すべてのフラグを使用できます。

サーバー.js:

app.use('/flags', express.static(FLAGS_FILES));
app.get('/flags', async (req, res) => {
    let myFlags;

    await readdir('data/flag-icons/')
        .then((flags) => myFlags = flags)
        .catch(err => console.log('Error:', err))

    res.json(myFlags)
});

クライアント側では、各 .svg ファイルを取得してコンポーネントにインライン化します。

私のReactコンポーネントは次のようになります:

MapThumbnail コンポーネント:

render(){
        const {flagcode} = this.props;
        const filepath = `/flags/${mapcode}/vector.svg`;

        console.log('filepath:', filepath);
        return (
            <MapThumbnailStyle>
                <img src={filepath} 
                     alt={flagcode} 
                     title={flagcode} 
                     width='40px' 
                     height='40px' 
                />
            </MapThumbnailStyle>
        );
    }