在create-react-app项目中将SVG作为ReactComponent导入时变得不确定 [英] Getting undefined when importing svg as ReactComponent in create-react-app project

问题描述

尝试将svg加载为ReactComponent时出现以下错误。

元素类型无效：预期为字符串（用于内置-in组件）或类/函数（对于复合组件），但得到：未定义。您可能忘记了从定义文件中导出组件，或者可能混淆了默认导入和命名导入。

检查图标。

我正在使用带有typescript选项的create-react-app创建项目。
如果我正确地理解了文档，那么我应该可以直接将svgs作为ReactComponent导入（自CRA2.0起）。
但是奇怪的是，我对导入的组件没有定义。

添加图像，字体和文件·创建React App
https：/ /facebook.github.io/create-react-app/docs/adding-images-fonts-and-files#adding-svgs

当前正在使用以下软件包。

  react： ^ 16.8.6，
 react-dom： ^ 16.8.6，
 react-redux： ^ 6.0.1，
 react-router-dom： ^ 5.0.1，
 react-scripts： ^ 3.0.1，
 @ types / node： ^ 12.0.0，
 @ types / react： ^ 16.8.17 ，
 @ types / react-dom： ^ 16.8.4，
 @ types / react-redux： ^ 7.0.8，
 @ types / react -router-dom： ^ 4.3.3，
  

我的代码如下。

Icon.tsx

  import *作为Reac t来自反应； 
从 ./IconSvg.svg导入{ReactComponent as IconSvg}; 
 
 const图标：React.FC< IconProps> =道具=> {
 console.log（IconSvg）; //未定义的
 return（< IconSvg />））; 
}; 
 
导出默认图标； 
  

custom.d.ts

 声明模块'* .svg'{
 import React = require（'react'）; 
 export const ReactComponent：React.FunctionComponent< React.SVGProps< SVGSVGElement>> ;; 
 const src：字符串; 
 export default src; 
} 
  

tsconfig.json

< pre class = lang-js prettyprint-override> {
compilerOptions：{
allowJs：true，
checkJs：true，
baseUrl： src，
rootDir： src，
outDir： build / dist，
target： es5，
jsx：反应，
lib：[
es6，
dom
]，
forceConsistentCasingInFileNames：true，
module： esnext，
moduleResolution： node，
noImplicitReturns：true，
noImplicitThis：true，
noImplicitAny ：true，
strictNullChecks：true，
suppressImplicitAnyIndexErrors：true，
noUnusedLocals：false，
allowSyntheticDefaultImports：true
}，
include：[
src，
custom.d.ts
]，
exclude：[
node_modules，
node_scripts，
构建，
脚本，
验收测试 ，
webpack，
jest，
src / setupTests.ts
]
}


任何建议都值得赞赏。

解决方案

尝试使用样式化的组件

 从'assets / logo.svg'导入徽标； 
 
 const Image = styled.img< Props>`<此处用于徽标的标准宽度和高度的一些设置。 
 
 const LogoWrapper = styled（Image）`
过渡：所有0.25s线性； 
& ;:悬停{
 transform：scale（1.25）; 
}`; 
 
< LogoWrapper height = {140} src = {Logo} alt = Some Logo /> 
  

这个正在工作er

I'm getting following error when trying to load svg as ReactComponent.

Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check the render method of Icon.

I'm using create-react-app with typescript option to create project. If I'm understanding the document correctly, I should be able to import svgs as ReactComponent out of the box(since CRA2.0). But weirdly, I'm getting undefined for the imported component.

Adding Images, Fonts, and Files · Create React App https://facebook.github.io/create-react-app/docs/adding-images-fonts-and-files#adding-svgs

Currently using following packages.

    "react": "^16.8.6",
    "react-dom": "^16.8.6",
    "react-redux": "^6.0.1",
    "react-router-dom": "^5.0.1",
    "react-scripts": "^3.0.1",
    "@types/node": "^12.0.0",
    "@types/react": "^16.8.17",
    "@types/react-dom": "^16.8.4",
    "@types/react-redux": "^7.0.8",
    "@types/react-router-dom": "^4.3.3",

My code is below.

Icon.tsx

import * as React from 'react';
import { ReactComponent as IconSvg } from './IconSvg.svg';

const Icon: React.FC<IconProps> = props => {
  console.log(IconSvg); // undefined
  return (<IconSvg />);
};

export default Icon;

custom.d.ts

declare module '*.svg' {
  import React = require('react');
  export const ReactComponent: React.FunctionComponent<React.SVGProps<SVGSVGElement>>;
  const src: string;
  export default src;
} 

tsconfig.json

{
  "compilerOptions": {
    "allowJs": true,
    "checkJs": true,
    "baseUrl": "src",
    "rootDir": "src",
    "outDir": "build/dist",
    "target": "es5",
    "jsx": "react",
    "lib": [
      "es6",
      "dom"
    ],
    "forceConsistentCasingInFileNames": true,
    "module": "esnext",
    "moduleResolution": "node",
    "noImplicitReturns": true,
    "noImplicitThis": true,
    "noImplicitAny": true,
    "strictNullChecks": true,
    "suppressImplicitAnyIndexErrors": true,
    "noUnusedLocals": false,
    "allowSyntheticDefaultImports": true
  },
  "include": [
    "src",
    "custom.d.ts"
  ],
  "exclude": [
    "node_modules",
    "node_scripts",
    "build",
    "scripts",
    "acceptance-tests",
    "webpack",
    "jest",
    "src/setupTests.ts"
  ]
}

Any advice is appreciated.

解决方案

Try to use Styled components

import Logo from 'assets/logo.svg';

const Image = styled.img<Props>`<some setting for standard width and height for logo here`>

const LogoWrapper = styled(Image)`
transition: all 0.25s linear;
&: hover {
    transform: scale(1.25);
}`;

<LogoWrapper height={140} src={Logo} alt="Some Logo" />

This one is working er

这篇关于在create-react-app项目中将SVG作为ReactComponent导入时变得不确定的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！