无法导入Vite作为ReactComponent的SVG
无法导入Vite作为ReactComponent的SVG
提问于 2021-12-10 19:32:47
尝试使用此库：vite-插件-react svg
但通过进口却没有成功，例如：
import { ExternalLink } from 'assets/svg/link-external.svg?component';这个问题有什么解决办法吗？
我之前遇到的错误如下：
import { ReactComponent as ExternalLink } from 'assets/svg/link-external.svg';
//Uncaught SyntaxError:
The requested module '/src/assets/svg/link-external.svg?import'
does not provide an export named 'ReactComponent'回答 6
Stack Overflow用户
回答已采纳
发布于 2021-12-11 09:36:23
使用vite-plugin-svgr
- 将
SVGR添加到项目中
yarn add -D @honkhonk/vite-plugin-svgr
- 将插件
SVGR添加到vite.config.js中的vite中
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import svgr from '@honkhonk/vite-plugin-svgr'
export default defineConfig({
plugins: [ svgr(), react()]
})- 在
App.tsx中，通过在SVG的导入指令中添加?component，将svg导入为React组件：
import Happy from './assets/svg/happy.svg?component'
<Happy />您可以在SVGR上找到更多关于https://react-svgr.com/docs/ecosystem/#articles的信息。
Stack Overflow用户
发布于 2022-01-12 16:39:11
如果有人对接受的答案有问题，请尝试这个包中描述的解决方案：https://www.npmjs.com/package/vite-plugin-svgr
import { ReactComponent as Logo } from './logo.svg'
出于某种原因，我无法使用公认的答案来构建
Stack Overflow用户
发布于 2022-10-16 14:16:54
您应该使用@svgr/rollup而不是vite-plugin-svgr。vite-plugin-svgr不是一个好的选择，因为它不支持svgo，而且它使用esbuild来转换一些svg代码，在es5环境中可能会出现一些问题。
最糟糕的是vite-plugin-svgr不能添加svgo插件，请看这个问题：https://github.com/pd4d10/vite-plugin-svgr/issues/49。
npm install @svgr/rollup -Dimport { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import svgr from '@svgr/rollup';
export default defineConfig({
plugins: [react(), svgr()]
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/70309561
复制相关文章
相似问题
腾讯云开发者
