Невозможно импортировать файл SVG в реакцию

Question

У меня есть несколько значков, которые лежат в файле SVG, которые мне нужно использовать в моем приложении React, проблема в том, что все, что он говорит, когда я пытаюсь импортировать это «Не удается найти модуль».

класс выглядиткак это

import * as React from "react";
import "./LeaderboardBar.scss";
import Trophy from './icon_tournament.svg'

export interface Props
{
    display: boolean
}

export interface State
{

}

export class LeaderboardBar extends React.Component<Props, State>
{
    render()
    {
        return (
            <div id="leaderboard-bar">
            <div>
                <p id="leaderboard-bar-text">Raging Rex Tournament</p>
            </div>
            <div id="rank-text">
                <p id="leaderboard-bar-text">Your Rank  <span id="gold-text">77/542</span></p>
            </div>
            <div id="score-text">
                <p id="leaderboard-bar-text">Score <span id="gold-text">54</span></p>
            </div>
            <div id="terms-text">
                <p id="leaderboard-bar-text">Terms & Info</p>
            </div>
            </div>
        )
    }
}

У меня установлено https://www.npmjs.com/package/@svgr/webpack, но проблемы остаются теми же.Какова наилучшая практика импорта SVG в React?

Answer 1

Чтобы ответить на ваш вопрос о том, как лучше импортировать SVG в реагирование, вот хороший способ:

import { ReactComponent as SvgSmiley } from "./assets/smiley.svg";

function App() {
  return (
    <div className="App">
      <SvgSmiley style={{ fill: "green" }} />
    </div>
  );
}

Если файл SVG содержит разметку SVG.Он находится в том же каталоге, что и код выше, но в другой папке под названием «assets».

Таким образом, вы можете управлять стилем SVG, как заливка из вашего кода.

Посмотрите, как это работает здесь.

Узнайте больше о том, как придумать иконки SVG.

Answer 2

Попробуйте использовать url-loader и file-loader в конфигурации вашего веб-пакета, используя следующую конфигурацию:

{ test: /\.(jpg|png|svg)$/, loader: 'url-loader', options: { limit: 25000, }, }, { test: /\.(jpg|png|svg)$/, loader: 'file-loader', options: { name: '[path][name].[hash].[ext]', }, },