blocks|key|740778|text|使用vite-plugin-svgr|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|740779|将SVGR添加到项目中|ordered-list-item|740780|yarn+add+-D+@honkhonk/vite-plugin-svgr|740781|将插件SVGR添加到vite.config.js中的vite中|740782|import+{+defineConfig+}+from+'vite'
import+react+from+'@vitejs/plugin-react'
import+svgr+from+'@honkhonk/vite-plugin-svgr'

export+default+defineConfig({
++plugins:+[+svgr(),+react()]
})|code-block|syntax|javascript|740783|在App.tsx中，通过在SVG的导入指令中添加?component，将svg导入为React组件：|740784|import+Happy+from+'./assets/svg/happy.svg?component'

<Happy+/>|740785|您可以在SVGR上找到更多关于https://react-svgr.com/docs/ecosystem/#articles的信息。|BOLD|740786|entityMap|0|LINK|mutability|MUTABLE|url|https://react-svgr.com/docs/ecosystem/#articles^0|2|G|0|1|4|0|0|12|0|3|4|A|E|0|0|1|7|O|A|0|0|4|4|F|1B|0|0^^$0|@$1|2|3|4|5|6|7|16|8|@$9|17|A|18|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|19|8|@$9|1A|A|1B|B|C]]|D|@]|E|$]]|$1|I|3|J|5|6|7|1C|8|@$9|1D|A|1E|B|C]]|D|@]|E|$]]|$1|K|3|L|5|H|7|1F|8|@$9|1G|A|1H|B|C]|$9|1I|A|1J|B|C]]|D|@]|E|$]]|$1|M|3|N|5|O|7|1K|8|@]|D|@]|E|$P|Q]]|$1|R|3|S|5|H|7|1L|8|@$9|1M|A|1N|B|C]|$9|1O|A|1P|B|C]]|D|@]|E|$]]|$1|T|3|U|5|O|7|1Q|8|@]|D|@]|E|$P|Q]]|$1|V|3|W|5|6|7|1R|8|@$9|1S|A|1T|B|X]]|D|@$9|1U|A|1V|1|1W]]|E|$]]|$1|Y|3|-4|5|6|7|1X|8|@]|D|@]|E|$]]]|Z|$10|$5|11|12|13|E|$14|15]]]]

Use <code>vite-plugin-svgr</code>
<ol>
<li>Add <code>SVGR</code> to the project</li>
</ol>
<code>yarn add -D @honkhonk/vite-plugin-svgr</code>
<ol start="2">
<li>Add the plugin <code>SVGR</code> to vite in <code>vite.config.js</code></li>
</ol>
<pre><code>import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import svgr from '@honkhonk/vite-plugin-svgr'

export default defineConfig({
 plugins: [ svgr(), react()]
})
</code></pre>
<ol start="3">
<li>In <code>App.tsx</code> import SVG as React Component by adding <code>?component</code> on the svg's import directive :</li>
</ol>
<pre class="lang-js prettyprint-override"><code>import Happy from './assets/svg/happy.svg?component'

&lt;Happy /&gt;
</code></pre>
You can find more informations about SVGR at <a href="https://react-svgr.com/docs/ecosystem/#articles" rel="noreferrer">https://react-svgr.com/docs/ecosystem/#articles</a>

blocks|key|1843964|text|如果有人对接受的答案有问题，请尝试这个包中描述的解决方案：https://www.npmjs.com/package/vite-plugin-svgr|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1843965|import+{+ReactComponent+as+Logo+}+from+'./logo.svg'|style|CODE|1843966|出于某种原因，我无法使用公认的答案来构建|1843967|entityMap|0|LINK|mutability|MUTABLE|url|https://www.npmjs.com/package/vite-plugin-svgr^0|T|1A|0|0|0|1F|0|0^^$0|@$1|2|3|4|5|6|7|R|8|@]|9|@$A|S|B|T|1|U]]|C|$]]|$1|D|3|E|5|6|7|V|8|@$A|W|B|X|F|G]]|9|@]|C|$]]|$1|H|3|I|5|6|7|Y|8|@]|9|@]|C|$]]|$1|J|3|-4|5|6|7|Z|8|@]|9|@]|C|$]]]|K|$L|$5|M|N|O|C|$P|Q]]]]

Anyone having issues with the accepted answer, try the solution described in this package:
<a href="https://www.npmjs.com/package/vite-plugin-svgr" rel="noreferrer">https://www.npmjs.com/package/vite-plugin-svgr</a>
<code>import { ReactComponent as Logo } from './logo.svg'</code>
For some reason, I couldn't build using the accepted answer

blocks|key|1843969|text|您可以通过像这样导入到img的赋值来避免svgr。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1843970|import+logo+from+"./logo-login.svg"
<img+src={logo}+className="w-24+inline-block"+alt="logo"+/>|code-block|syntax|javascript|1843971|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

You can avoid svgr by importing like this an assigning to an img
<pre><code>import logo from &quot;./logo-login.svg&quot;
&lt;img src={logo} className=&quot;w-24 inline-block&quot; alt=&quot;logo&quot; /&gt;
</code></pre>

blocks|key|740813|text|在安装这个软件包之后，我能够解决这个问题：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|740814|npm+i+vite-plugin-svgr|offset|length|style|CODE|740815|//+vite.config.js
import+{+defineConfig+}+from+'vite';
import+react+from+'@vitejs/plugin-react';
import+svgr+from+'vite-plugin-svgr';+//+make+sure+to+import+it

export+default+defineConfig({
++++plugins:+[react(),+svgr()],
});

//+App.jsx
import+{ReactComponent+as+ExternalLink}+from+'./assets/svg/link-external.svg';

<ExternalLink+/>|code-block|syntax|javascript|740816|entityMap^0|0|0|M|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|P|8|@$D|Q|E|R|F|G]]|9|@]|A|$]]|$1|H|3|I|5|J|7|S|8|@]|9|@]|A|$K|L]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

I was able to solve this issue after installing this package:
<code>npm i vite-plugin-svgr</code>
<pre><code>// vite.config.js
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import svgr from 'vite-plugin-svgr'; // make sure to import it

export default defineConfig({
 plugins: [react(), svgr()],
});

// App.jsx
import {ReactComponent as ExternalLink} from './assets/svg/link-external.svg';

&lt;ExternalLink /&gt;
</code></pre>

blocks|key|740821|text|您应该使用@svgr/rollup而不是vite-plugin-svgr。vite-plugin-svgr不是一个好的选择，因为它不支持svgo，而且它使用esbuild来转换一些svg代码，在es5环境中可能会出现一些问题。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|740822|最糟糕的是vite-plugin-svgr不能添加svgo插件，请看这个问题：https://github.com/pd4d10/vite-plugin-svgr/issues/49。|740823|npm+install+@svgr/rollup+-D|code-block|syntax|javascript|740824|import+{+defineConfig+}+from+'vite';
import+react+from+'@vitejs/plugin-react';
import+svgr+from+'@svgr/rollup';

export+default+defineConfig({
++plugins:+[react(),+svgr()]
});|740825|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/gregberge/svgr/tree/main/packages/rollup|1|https://github.com/pd4d10/vite-plugin-svgr/issues/49^0|5|C|K|G|11|G|1W|4|26|7|5|C|0|0|5|G|P|4|13|1G|1|0|0|0^^$0|@$1|2|3|4|5|6|7|Y|8|@$9|Z|A|10|B|C]|$9|11|A|12|B|C]|$9|13|A|14|B|C]|$9|15|A|16|B|C]|$9|17|A|18|B|C]]|D|@$9|19|A|1A|1|1B]]|E|$]]|$1|F|3|G|5|6|7|1C|8|@$9|1D|A|1E|B|C]|$9|1F|A|1G|B|C]]|D|@$9|1H|A|1I|1|1J]]|E|$]]|$1|H|3|I|5|J|7|1K|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|J|7|1L|8|@]|D|@]|E|$K|L]]|$1|O|3|-4|5|6|7|1M|8|@]|D|@]|E|$]]]|P|$Q|$5|R|S|T|E|$U|V]]|W|$5|R|S|T|E|$U|X]]]]

You should use <a href="https://github.com/gregberge/svgr/tree/main/packages/rollup" rel="nofollow noreferrer"><code>@svgr/rollup</code></a> instead of <code>vite-plugin-svgr</code>.
<code>vite-plugin-svgr</code> is not a good choice, because it doesn't support <code>svgo</code>, and it use <code>esbuild</code> to transform some svg code, it may have some problem in es5 environment.
The worst thing is <code>vite-plugin-svgr</code> can't add <code>svgo</code> plugin, see this issue: <a href="https://github.com/pd4d10/vite-plugin-svgr/issues/49" rel="nofollow noreferrer">https://github.com/pd4d10/vite-plugin-svgr/issues/49</a>.
<pre class="lang-bash prettyprint-override"><code>npm install @svgr/rollup -D
</code></pre>
<pre class="lang-js prettyprint-override"><code>import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import svgr from '@svgr/rollup';

export default defineConfig({
 plugins: [react(), svgr()]
});
</code></pre>

blocks|key|1844082|text|yarn+add+-D+vite-plugin-svgr将是最好的选择，因为它一直在被维护。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1844083|//+vite.config.js
import+svgr+from+'vite-plugin-svgr'

export+default+{
++plugins:+[svgr()],
}|code-block|syntax|javascript|1844084|import+{+ReactComponent+as+Logo+}+from+'./logo.svg'|1844085|此外，还可以通过在vite.config.js中设置此配置选项作为默认导入。|1844086|svgr({
++exportAsDefault:+true
})|1844087|//+now+you+can+import+as+default
import+Logo+from+'./logo.svg'|1844088|但是请注意，它将重写Vite的默认行为，该行为将URL导出为默认值。|1844089|如果您有任何类型记录问题，也有一个更好的类型推断的声明助手。|1844090|///+<reference+types="vite-plugin-svgr/client"+/>|1844091|entityMap^0|0|S|0|0|0|9|E|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|10|8|@$9|11|A|12|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|13|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|H|7|14|8|@]|D|@]|E|$I|J]]|$1|M|3|N|5|6|7|15|8|@$9|16|A|17|B|C]]|D|@]|E|$]]|$1|O|3|P|5|H|7|18|8|@]|D|@]|E|$I|J]]|$1|Q|3|R|5|H|7|19|8|@]|D|@]|E|$I|J]]|$1|S|3|T|5|6|7|1A|8|@]|D|@]|E|$]]|$1|U|3|V|5|6|7|1B|8|@]|D|@]|E|$]]|$1|W|3|X|5|H|7|1C|8|@]|D|@]|E|$I|J]]|$1|Y|3|-4|5|6|7|1D|8|@]|D|@]|E|$]]]|Z|$]]

<code>yarn add -D vite-plugin-svgr</code> will be the best choice as it keeps being maintained.
<pre><code>// vite.config.js
import svgr from 'vite-plugin-svgr'

export default {
 plugins: [svgr()],
}
</code></pre>
<pre class="lang-js prettyprint-override"><code>import { ReactComponent as Logo } from './logo.svg'
</code></pre>
Also you can import as default by setting up this config option in <code>vite.config.js</code>.
<pre class="lang-js prettyprint-override"><code>svgr({
 exportAsDefault: true
})
</code></pre>
<pre class="lang-js prettyprint-override"><code>// now you can import as default
import Logo from './logo.svg'
</code></pre>
But notice that it will overrides the default behavior of Vite which exports the URL as default.
<hr />
If you have any typescript issues, there is also a declaration helper for better type inference
<pre class="lang-js prettyprint-override"><code>/// &lt;reference types=&quot;vite-plugin-svgr/client&quot; /&gt;
</code></pre>

Tried to use this library: <a href="https://www.npmjs.com/package/vite-plugin-react-svg" rel="noreferrer">vite-plugin-react-svg</a>
and had no success by importing it like:
<pre><code>import { ExternalLink } from 'assets/svg/link-external.svg?component';
</code></pre>
Are there any workarounds for this issue?
The error i got before was the following:
<pre><code>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'
</code></pre>

Unable to import SVG with Vite as ReactComponent

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋 

腾讯云代码助手

CODING DevOps

Cloud Studio

SDK中心

API中心

命令行工具

尝试使用此库：但通过进口却没有成功，例如：import { ExternalLink } from 'assets/svg/link-external.svg?component';这个问题有什么解决办法吗？我之前遇到的错误如下：import { ReactComponent as ExternalLink } fro...

问无法导入Vite作为ReactComponent的SVG
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问无法导入Vite作为ReactComponent的SVGEN