@svgr/webpack 引入svg报错

Question

问题描述

@svgr/webpack 引入svg报错

问题出现的环境背景及自己尝试过哪些方法

根据antd的Icon组件配置的@svgr/webpack
删除@svgr/webpack的options能够正常运行

相关代码

// 请把代码文本粘贴到下方（请勿用图片代替代码）

test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
use: [
     {
        loader: 'babel-loader'
     }, {
        loader: '@svgr/webpack',
        options: {
            babel: false,
            icon: true
         }
     }
]

// xx.tsx
import xxSvg from 'path/xx.svg';

你期待的结果是什么？实际看到的错误信息又是什么？

能够正常运行

Answer 1

请问题主解决了吗？我在使用webpack搭建react的开发环境时也出现了同样的问题

Answer 2

通过create-react-app 搭建的项目不需要使用 @svgr/webpack 进行编译，可以直接导入 SVG 作为 React 组件使用

import { ReactComponent as Logo } from './logo.svg';
const App = () => (
    <div\> 
        {/\* Logo 是一个实际的 React 组件 \*/}
        <Logo /> 
    </div\>
);

官方文档： https://www.html.cn/create-react-app/docs/adding-images-fonts-and-files/