Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Importing an svg image in typescript

Using the following code as an example, which works perfectly, the typescript compiler is crying about the "import logo from './images/logo.svg';" statement. The app works perfectly when ran in the browser so I am not having any issues with functionality. I'd just like to get rid of the squiggly red line so I can clean up my directory viewer. Any help would be greatly appreciated.

import * as React from 'react';
import logo from './images/logo.svg';

interface Property {}
interface State {} 

export default class App extends React.Component<Property, State> { 
    render() {
        return (
            <div className="App">
                <div className="App-header">
                    <img src={logo} className="App-logo" alt="logo" />                        
                </div>      
            </div>
        );
    }
}
like image 990
Mikejg101 Avatar asked Apr 02 '17 21:04

Mikejg101


People also ask

What is the type of SVG in TypeScript?

What is the type of the <svg> element in TypeScript? The interface type of <svg> elements in an *. svg document (i.e. the SVG DOM) is SVGElement . The type of an <svg> element within a HTML document (i.e. the HTML DOM) is actually a prototype-less object that implements both HTMLElement and SVGElement !

How do I add an SVG image to react?

Importing SVGs using the image tag is one of the easiest ways to use an SVG. If you initialize your app using CRA (Create React App), you can import the SVG file in the image source attribute, as it supports it off the bat. import YourSvg from "/path/to/image.


1 Answers

add declare module '*.svg' in any of your typing files. (.d.ts)

like image 50
Steve McMeen Avatar answered Oct 03 '22 04:10

Steve McMeen