开放式 SVG 图标未显示在 Reactstrap Web 应用程序中答案

【问题标题】：Open-iconic SVG icon not showing in Reactstrap web app开放式 SVG 图标未显示在 Reactstrap Web 应用程序中
【发布时间】：2021-06-23 23:48:54
【问题描述】：

我有一个使用 Reactstrap 编写的网络应用程序。 index.html 文件如下所示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="theme-color" content="#000000">
    <base href="%PUBLIC_URL%/" />
    <!--
      manifest.json provides metadata used when your web app is added to the
      homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
    -->
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
    <link rel="manifest" href="/site.webmanifest">
    <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
    <meta name="msapplication-TileColor" content="#da532c">
    <meta name="theme-color" content="#ffffff">
    <!--
      Notice the use of %PUBLIC_URL% in the tags above.
      It will be replaced with the URL of the `public` folder during the build.
      Only files inside the `public` folder can be referenced from the HTML.

      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
      work correctly both with client-side routing and a non-root public URL.
      Learn how to configure a non-root public URL by running `npm run build`.
    -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

    <!-- Add the iconic SVGs here -->
    <script src="svg-injector.min.js"></script>
    <script>

        // Elements to inject
        var mySVGsToInject = document.querySelectorAll('.iconic-sprite');

        // Do the injection
        SVGInjector(mySVGsToInject);
    </script>
</head>
<body>
    <img src="open-iconic.svg" class="iconic-sprite" style="display:none;" />
    <div id="root"></div>
    <!--
      This HTML file is a template.
      If you open it directly in the browser, you will see an empty page.

      You can add webfonts, meta tags, or analytics to this file.
      The build step will place the bundled scripts into the <body> tag.

      To begin the development, run `npm start` or `yarn start`.
      To create a production bundle, use `npm run build` or `yarn build`.
    -->
</body>
</html>

在我的一个组件中，我尝试插入这样的图标：

import React from 'react';
import { Jumbotron } from 'reactstrap';

export function Home(props) {
  return (
    <div>
      <Jumbotron>
        <div className="d-flex flex-column">
          <div className="d-flex justify-content-center">
            <svg viewBox="0 0 8 8" className="glyph">
              <use xlinkHref="#chevron-bottom" />
            </svg>
          </div>
        </div>
      </Jumbotron>
    </div>
  );
}

我正在使用 reactstrap 版本 8.9.0 和 svg-injector 版本 1.1.3，并且我正在遵循设置说明 here。我遇到的问题是图标未显示，并且出现以下两个错误：

svg-injector.min.js:1 Uncaught SyntaxError: Unexpected token '<'
(index):39 Uncaught ReferenceError: SVGInjector is not defined
    at (index):39

我在这里做错了什么？

【问题讨论】：

标签： javascript svg reactstrap

【解决方案1】：

大多数情况下，当您收到Uncaught SyntaxError: Unexpected token '<' 之类的错误时，脚本元素中引用的文件可能存在 404 错误。

您确定 index.html 第 39 行的文件存在吗？

<!-- Add the iconic SVGs here -->
<script src="svg-injector.min.js"></script>

【讨论】：

我在package.json 中列出了该文件所在的包，我确信它在本地存在。作为参考，我正在遵循设置说明here。
通过这一行<script src="svg-injector.min.js"></script>，您表示svg-injector.min.js 文件与index.html 文件位于同一文件夹中。如果它不在同一个文件夹中，请尝试将其寻址到正确的路径。例如<script src="../assets/svgInjector/svg-injector.min.js"></script>
嗯，如果我通过 npm 安装了它，我会怎么做？
它必须在node_modules 文件夹中的某个位置，查找并使用确切的路径。应该是 node_modules/svg-injector/...
啊，好吧。那我试试看。我想会有一种更简单的方法来做到这一点