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样式，例如从代码填充。

See this working here.

Read more on how to get fancy with SVG icons.

Answer 2

尝试使用以下配置在webpack配置上使用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]', }, },

无法将SVG文件导入React

2 个答案: