React 代碼 Import Svg as ReactComponent 失敗

在 react 里面使用 svg

一、在 create-react-app 創建的項目中

　　方式 1、

　　

import logo from './logo.svg';


<img src={logo}  />

缺點在於不能在修改顏色，這里其實就是直接用 img 加載了 svg 文件

 

     方式 2、

import {ReactComponent  as ComLogo} from './logo.svg';


<ComLogo  />

這里可以看見，實際上就是渲染了一個 SVG ，自定義的程度會很高。不過有版本需要：

react-scripts  版本要大於 @2.0.0

react  版本大於 @16.3.0

具體可以參考官方文檔

 

二、自己從零開始配置的 webpack 項目

 

如果使用上面的第二種方式引入，發現竟然是 undefined , 進過研究發現需要一些配置。

注意 1、 typescript 項目 需要在項目根目錄  加一個 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 中加入：

 

 

　　

 注意 2 、通過對 create-react-app 進行 eject , 查看配置發現，還需要給 webpack 加入配置：

　　

 

　　

[
                  require.resolve('babel-plugin-named-asset-import'),
                  {
                    loaderMap: {
                      svg: {
                        ReactComponent: '@svgr/webpack?-svgo,+ref![path]',
                      },
                    },
                  },
                ],

　　

 

最后安裝：

yarn add babel-plugin-named-asset-import

yarn add @svgr/webpack

　　

 

三、如果 在  create-react-app 使用了  @craco/craco  進行修改 webpack 配置。

　　那么一樣需要安裝 

@svgr/webpack

然后配置如下：

module.exports = {
	  plugins: [
	   
	  ],
	  // ... 其他配置
	  webpack: {
	    configure: (config, { env, paths }) => {
		
		  // 需要在這里添加
	      config.module.rules.push({
	        test: /\.svg$/,
	        use: ["@svgr/webpack"]
	      });
	      return config;
	    }
	  }
	};