No se pueden importar archivos svg en mecanografiado

En typescript(*.tsx)archivos no puedo importar archivos svg con esta declaración:

import logo from './logo.svg';

Transpiler dice: [ts] cannot find module './logo.svg'. Mi archivo svg es solo <svg>...</svg>.

Pero en el .jsarchivo puedo importarlo sin problemas con exactamente la misma declaración de importación. Supongo que tiene algo que ver con el tipo de archivo svg que debe configurarse de alguna manera para ts transpiler.

¿Podría compartir cómo hacer que esto funcione en archivos ts?

Si usa webpack, puede hacer esto creando un archivo de tipos personalizados.

Cree un archivo llamado custom.d.ts con el siguiente contenido:

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

Agregue el custom.d.tsa tsconfig.jsoncomo se muestra a continuación

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

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

Gracias smarx por señalar el uso require(). Entonces en mi caso debería ser:

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

que funciona bien en archivos * .tsx

Agregue un custom.d.tsarchivo (lo creé en la ruta raíz de mi directorio src) con el tipo correcto (gracias a RedMatt ):

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

Instale svg-react-loader o algún otro , luego:

• Úselo como el cargador principal de svg
• O si está migrando una base de código y no desea tocar la parte de trabajo (JS), especifique el cargador en la importación:

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

Luego utilícelo como una etiqueta JSX:

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

La solución que encontré: en el proyecto ReactJS, en el archivo react-app-env.d.ts simplemente elimina el espacio en el comentario, como por ejemplo:

antes de

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

Después

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

Espero poder ayudarte

Tuve el mismo problema al probar un tutorial de REACT + mecanografiado.
Lo que funcionó para mí fue la siguiente declaración de importación.

import * as logo from 'logo.svg'

Aquí están mis dependencias en package.json.

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

Espero que ayude a alguien.

Para usar n activos en código con TypeScript , debemos diferir el tipo para estas importaciones . Esto requiere un archivo custom.d.ts que significa definiciones personalizadas para TypeScript en nuestro proyecto.

Configuremos una declaración para archivos .svg:

custom.d.ts

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

Aquí declaramos un nuevo módulo para SVG especificando cualquier importación que termine en .svg y definiendo el contenido del módulo como cualquiera.

Hay una forma alternativa de hacer esto que hemos implementado: haga sus componentes SVG. Hice esto porque me molestaba que estuviera usando requiredeclaraciones commonJS junto con mi imports.

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

si está utilizando el puglin slint, puede ser que haya deshabilitado pensando que era un comentario, pero no para leer el svg, necesita este módulo de script de tipo, simplemente deshabilite la línea y sea feliz