Incapaz de importar arquivos svg no texto datilografado

Em typescript(*.tsx)arquivos, não consigo importar o arquivo svg com esta declaração:

import logo from './logo.svg';

Transpiler diz: [ts] cannot find module './logo.svg'. Meu arquivo svg é justo <svg>...</svg>.

Mas no .jsarquivo posso importá-lo sem problemas com exatamente a mesma instrução de importação. Suponho que tenha algo a ver com o tipo de arquivo svg que deve ser definido de alguma forma para transpiler ts.

Você poderia compartilhar como fazer isso funcionar em arquivos ts?

Se você usar o webpack, poderá fazer isso criando um arquivo de tipos personalizados.

Crie um arquivo denominado custom.d.ts com o seguinte conteúdo:

declare module "*.svg" {
  const content: any;
  export default content;
}

Adicione o custom.d.tsa tsconfig.jsoncomo abaixo

"include": ["src/components", "src/custom.d.ts"]

Fonte: https://webpack.js.org/guides/typescript/#importing-other-assets

Obrigado smarx por apontar o uso require(). Então, no meu caso, deveria ser:

const logo = require("./logo.svg") as string;

que funciona bem em arquivos * .tsx

Adicione um custom.d.tsarquivo (eu o criei no caminho raiz do meu diretório src) com o tipo correto (graças a RedMatt ):

declare module '*.svg' {
  const content: React.FunctionComponent<React.SVGAttributes<SVGElement>>;
  export default content;
}

Instale svg-react-loader ou algum outro , então:

• Use-o como o carregador svg principal
• Ou, se você estiver migrando uma base de código e não quiser tocar na parte de trabalho (JS), especifique o carregador na importação:

import MySVG from '-!svg-react-loader!src/assets/images/name.svg'

Em seguida, basta usá-lo como uma tag JSX:

function f() { 
  return (<MySVG />); 
}

A solução que encontrei: No projeto ReactJS, no arquivo react-app-env.d.ts você apenas remove o espaço no comentário como:

Antes

// / <reference types="react-scripts" />

Depois de

/// <reference types="react-scripts" />

Espero te ajudar

Eu tive o mesmo problema ao tentar um tutorial REACT + datilografado.
O que funcionou para mim foi a seguinte instrução de importação.

import * as logo from 'logo.svg'

Aqui estão minhas dependências em package.json.

  "dependencies": {
    "react": "^16.8.4",
    "react-dom": "^16.8.4",
    "react-scripts-ts": "3.1.0"
  },

Espero que ajude alguém.

Existe uma maneira alternativa de fazer isso que implementamos: crie seus componentes SVGs. Eu fiz isso porque me incomodou que eu estava usando requiredeclarações commonJS junto com o meu imports.

    // eslint-disable-next-line spaced-comment
/// <reference types="react-scripts" />

se você estiver usando o slint do puglin pode ser que ele tenha desativado pensando que era um comentário mas não para ler o svg você precisa deste tipo de módulo de script apenas desative a linha e fique feliz

Para usar n ativos no código com TypeScript , precisamos adiar o tipo para essas importações . Isso requer um arquivo custom.d.ts que significa definições personalizadas para TypeScript em nosso projeto.

Vamos configurar uma declaração para arquivos .svg:

custom.d.ts

declare module "*.svg" {
  const content: any;
  export default content;
}

Aqui, declaramos um novo módulo para SVGs especificando qualquer importação que termine em .svg e definindo o conteúdo do módulo como any.