0

I'm loading an SVG in a react app. The SVG references an external style sheet.

If I move the SVG out of the JSX and into the index.html, the SVG uses the defined css class.

If I use a a library such as react-svg, the svg is loading the external css class in JSX.

Why does the SVG not load the external CSS when using the SVG in JSX?

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import ReactSVG from 'react-svg'
    class App extends Component {
      render() {
        return (
          <object data={logo} className="App-logo" type="image/svg+xml"></object> 
        );
      }
    }

    export default App;




<?xml-stylesheet type="text/css" href="./App.css" ?>
    <svg  xmlns="http://www.w3.org/2000/svg" viewBox="0 0 841.9 595.3">
        <g class='svgTestFill'>
            <path  d="M666.3 296.5c0-32.5-40.7-63.3-103.1-82.4 ..."/>
            <circle  cx="420.9" cy="296.5" r="45.7"/>
            <path   d="M520.5 78.1z"/>
        </g>
    </svg>

This should render the logo with a red fill. I also do not want to use the SVG inline. I have to import the SVG as an object.

After inspecting network requests, the CSS file I'm referencing in the SVG is returned from the create-react app as an HTML page, not CSS. Maybe this is the problem?

user714157
  • 399
  • 2
  • 4
  • 18
  • "Your css file would only have an effect on the content of the SVG if the SVG file is included inline in the HTML:" from [How to style SVG with external CSS?](https://stackoverflow.com/questions/18434094/how-to-style-svg-with-external-css) Also [“Security restrictions” when linking to external stylesheet from SVG](https://stackoverflow.com/questions/12604095/security-restrictions-when-linking-to-external-stylesheet-from-svg-when-embed) – enxaneta Apr 17 '19 at 15:14
  • Ok, but this doesn't work in JSX. External style sheet works in html. Also works with react-svg – user714157 Apr 17 '19 at 15:28

1 Answers1

0

This turns out is an issues with a crate react app. If using a relative path in the SVG, the request to the external sheet will be in the static/media directory. If the path to the external css sheet in absolute, this works.

user714157
  • 399
  • 2
  • 4
  • 18