Search code examples
javascriptsvgreactstrap

Open-iconic SVG icon not showing in Reactstrap web app

I have a web app written using Reactstrap. The index.html file looks like this:

<!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>

In one of my components I try and insert an icon like this:

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>
  );
}

I'm using reactstrap version 8.9.0 and svg-injector version 1.1.3 and I'm following the setup instructions here. The problem I'm having is that the icon is not displaying and I'm getting the following two errors:

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

What am I doing wrong here?

Solution

  • Most of the time when you get an error like Uncaught SyntaxError: Unexpected token '<', there might be a 404 error on the file referenced in the script element.

    Are you sure the file on line 39 of your index.html exists?

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