时间戳

首页 > 解决方案 > 无法将 SVG 文件导入反应

reactjs - 无法将 SVG 文件导入反应

问题描述

我有一些位于 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 的最佳实践是什么？

标签： reactjssvg

解决方案

要回答您关于将 SVG 导入 react 的最佳实践是什么的问题，这是一个非常好的方法：

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

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

SVG 文件只包含 SVG 标记。它与上面的代码位于同一目录中，但位于另一个名为“assets”的文件夹下。

这种方式允许您控制 SVG 样式，例如从代码中填充。

在这里看到这个工作。

阅读更多关于如何使用 SVG 图标的信息。

推荐阅读