blocks|key|682829|text|如果图像是远程托管的，则可以直接使用.svg扩展和img标记。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|682830|ReactDOM.render(
++<img+src={"http://s.cdpn.io/3/kiwi.svg"}/>,
++document.getElementById('root')
);|code-block|syntax|javascript|682831|这是小提琴：http://codepen.io/srinivasdamam-1471688843/pen/ZLNYdy?editors=0110|682832|注意:如果您正在使用任何web应用程序绑定器(如Webpack)，则需要有相关的文件加载程序。|682833|entityMap|0|LINK|mutability|MUTABLE|url|http://codepen.io/srinivasdamam-1471688843/pen/ZLNYdy?editors=0110^0|I|4|P|3|0|0|6|1U|0|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@$9|X|A|Y|B|C]|$9|Z|A|10|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|11|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|12|8|@]|D|@$9|13|A|14|1|15]]|E|$]]|$1|M|3|N|5|6|7|16|8|@]|D|@]|E|$]]|$1|O|3|-4|5|6|7|17|8|@]|D|@]|E|$]]]|P|$Q|$5|R|S|T|E|$U|V]]]]

You can directly use <code>.svg</code> extension with <code>img</code> tag if the image is remotely hosted.

<pre><code>ReactDOM.render(
 &lt;img src={"http://s.cdpn.io/3/kiwi.svg"}/&gt;,
 document.getElementById('root')
);
</code></pre>

Here is the fiddle: <a href="http://codepen.io/srinivasdamam-1471688843/pen/ZLNYdy?editors=0110" rel="noreferrer">http://codepen.io/srinivasdamam-1471688843/pen/ZLNYdy?editors=0110</a>

Note: If you are using any web app bundlers (like Webpack) you need to have related file loader.

blocks|key|1845843|text|有两种方法我想告诉你。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1845844|第一个只是简单导入所需的SVG。|1845845|import+MyImageSvg+from+'../../path/to.svg';|code-block|syntax|javascript|1845846|只需记住使用装载机，例如Webpack：|1845847|+{
+++++test:+/\.(ttf%7Ceot%7Csvg%7Cwoff(2)?)(\?[a-z0-9=&.]%2B)?$/,
+++++include:+[Path.join(__dirname,+"src/assets")],
+++++loader:+"file-loader?name=assets/[name].[ext]"
+}|1845848|另一种(也是更优雅的方法)是，您可以定义SVG图标sprite，并使用组件获取SVG的正确sprite。例如：|1845849|import+React+from+"react";
import+Icons+from+"../../assets/icons/icons.svg";+//+Path+to+your+icons.svg
import+PropTypes+from+'prop-types';

const+Icon+=+({+name,+color,+size+})+=>+(
++<svg+className={`icon+icon-${name}`}+fill={color}+width={size}+height={size}>
++++<use+xlinkHref={`${Icons}#icon-${name}`}+/>
++</svg>
);

Icon.propTypes+=+{
++name:+PropTypes.string.isRequired,
++color:+PropTypes.string,
++size:+PropTypes.number
};

export+default+Icon;|1845850|图标sprite+(icons.svg)可以定义为：|1845851|<svg+xmlns="http://www.w3.org/2000/svg"+style="display:+none;">

++++<symbol+id="icon-account-group"+viewBox="0+0+512+512">
++++++<path+d="m256+301l0-41c7-7+19-24+21-60+10-5+16-16+16-30+0-12-4-22-12-28+7-13+18-37+12-60-7-28-48-39-81-39-29+0-65+8-77+30-12-1-20+2-26+9-15+16-8+46-4+62+1+2+2+4+2+5l0+42c0+41+24+63+42+71l0+39c-8+3-17+7-26+10-56+20-104+37-112+64-11+31-11+102-11+105+0+6+5+11+11+11l384+0c6+0+10-5+10-11+0-3+0-74-10-105-11-31-69-48-139-74z+m-235+168c1-20+3-66+10-88+5-16+57-35+99-50+12-4+23-8+34-12+4-2+7-6+7-10l0-54c0-4-3-9-8-10-1+0-35-12-35-54l0-42c0-3-1-5-2-11-2-8-9-34-2-41+3-4+11-3+15-2+6+1+11-2+13-8+3-13+29-22+60-22+31+0+57+9+60+22+5+17-6+37-11+48-3+6-5+10-5+14+0+5+5+10+11+10+3+0+5+6+5+11+0+4-2+11-5+11-6+0-11+4-11+10+0+43-16+55-16+55-3+2-5+6-5+9l0+54c0+4+2+8+7+10+51+19+125+41+132+62+8+22+9+68+10+88l-363+0z+m480-94c-8-25-49-51-138-84l0-20c7-7+19-25+21-61+4-2+7-5+10-9+4-5+6-13+6-20+0-13-5-23-13-28+7-15+19-41+13-64-4-15-21-31-40-39-19-7-38-6-54+5-5+3-6+10-3+15+3+4+10+6+15+3+12-9+25-6+34-3+15+6+25+18+27+24+4+17-6+40-12+52-3+6-4+10-4+13+0+3+1+6+3+8+2+2+4+3+7+3+4+0+6+6+6+11+0+3-1+6-3+8-1+2-2+2-3+2-6+0-10+5-10+11+0+43-17+55-17+55-3+2-5+5-5+9l0+32c0+4+3+8+7+10+83+31+127+56+133+73+7+22+9+68+10+88l-43+0c-6+0-11+5-11+11+0+6+5+11+11+11l53+0c6+0+11-5+11-11+0-3+0-74-11-105z"/>
++++</symbol>

++++<symbol+id="icon-arrow-down"+viewBox="0+0+512+512">
++++++<path+d="m508+109c-4-4-11-3-15+1l-237+269-237-269c-4-4-11-5-15-1-5+4-5+11-1+15l245+278c2+2+5+3+8+3+3+0+6-1+8-3l245-278c4-4+4-11-1-15z"/>
++++</symbol>

++++<symbol+id="icon-arrow-left"+viewBox="0+0+512+512">
++++++<path+d="m133+256l269-237c4-4+5-11+1-15-4-5-11-5-15-1l-278+245c-2+2-3+5-3+8+0+3+1+6+3+8l278+245c2+2+4+3+7+3+3+0+6-1+8-4+4-4+3-11-1-15z"/>
++++</symbol>

++++<symbol+id="icon-arrow-right"+viewBox="0+0+512+512">
++++++<path+d="m402+248l-278-245c-4-4-11-4-15+1-4+4-3+11+1+15l269+237-269+237c-4+4-5+11-1+15+2+3+5+4+8+4+3+0+5-1+7-3l278-245c2-2+3-5+3-8+0-3-1-6-3-8z"/>
++++</symbol>
</svg>|1845852|您可以在http://fontastic.me/上免费定义自己的图标sprite。|offset|length|1845853|和用法：<Icon+name="arrow-down"+color="#FFFFFF"+size={35}+/>|style|CODE|1845854|还可以添加一些简单的样式，以便在任何地方使用图标：|1845855|[class%5E="icon-"],+[class*="+icon-"]+{
++++display:+inline-block;
++++vertical-align:+middle;
}|1845856|entityMap|0|LINK|mutability|MUTABLE|url|http://fontastic.me/^0|0|0|0|0|0|0|0|0|0|4|K|0|0|4|1G|0|0|0^^$0|@$1|2|3|4|5|6|7|1E|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|1F|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|1G|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|1H|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|1I|8|@]|9|@]|A|$G|H]]|$1|M|3|N|5|6|7|1J|8|@]|9|@]|A|$]]|$1|O|3|P|5|F|7|1K|8|@]|9|@]|A|$G|H]]|$1|Q|3|R|5|6|7|1L|8|@]|9|@]|A|$]]|$1|S|3|T|5|F|7|1M|8|@]|9|@]|A|$G|H]]|$1|U|3|V|5|6|7|1N|8|@]|9|@$W|1O|X|1P|1|1Q]]|A|$]]|$1|Y|3|Z|5|6|7|1R|8|@$W|1S|X|1T|10|11]]|9|@]|A|$]]|$1|12|3|13|5|6|7|1U|8|@]|9|@]|A|$]]|$1|14|3|15|5|F|7|1V|8|@]|9|@]|A|$G|H]]|$1|16|3|-4|5|6|7|1W|8|@]|9|@]|A|$]]]|17|$18|$5|19|1A|1B|A|$1C|1D]]]]

There are two ways I want to show you.

The first one is just a simple import of the required SVG.

<pre><code>import MyImageSvg from '../../path/to.svg';
</code></pre>

Just remember to use a loader for e.g. Webpack:

<pre><code> {
 test: /\.(ttf|eot|svg|woff(2)?)(\?[a-z0-9=&amp;.]+)?$/,
 include: [Path.join(__dirname, "src/assets")],
 loader: "file-loader?name=assets/[name].[ext]"
 }
</code></pre>

Another (and more elegant way) is that you can define an SVG icon sprite and use a component to fetch the correct sprite of the SVG. For example:

<pre><code>import React from "react";
import Icons from "../../assets/icons/icons.svg"; // Path to your icons.svg
import PropTypes from 'prop-types';

const Icon = ({ name, color, size }) =&gt; (
 &lt;svg className={`icon icon-${name}`} fill={color} width={size} height={size}&gt;
 &lt;use xlinkHref={`${Icons}#icon-${name}`} /&gt;
 &lt;/svg&gt;
);

Icon.propTypes = {
 name: PropTypes.string.isRequired,
 color: PropTypes.string,
 size: PropTypes.number
};

export default Icon;
</code></pre>

The icon sprite (icons.svg) can be defined as:

<pre><code>&lt;svg xmlns="http://www.w3.org/2000/svg" style="display: none;"&gt;

 &lt;symbol id="icon-account-group" viewBox="0 0 512 512"&gt;
 &lt;path d="m256 301l0-41c7-7 19-24 21-60 10-5 16-16 16-30 0-12-4-22-12-28 7-13 18-37 12-60-7-28-48-39-81-39-29 0-65 8-77 30-12-1-20 2-26 9-15 16-8 46-4 62 1 2 2 4 2 5l0 42c0 41 24 63 42 71l0 39c-8 3-17 7-26 10-56 20-104 37-112 64-11 31-11 102-11 105 0 6 5 11 11 11l384 0c6 0 10-5 10-11 0-3 0-74-10-105-11-31-69-48-139-74z m-235 168c1-20 3-66 10-88 5-16 57-35 99-50 12-4 23-8 34-12 4-2 7-6 7-10l0-54c0-4-3-9-8-10-1 0-35-12-35-54l0-42c0-3-1-5-2-11-2-8-9-34-2-41 3-4 11-3 15-2 6 1 11-2 13-8 3-13 29-22 60-22 31 0 57 9 60 22 5 17-6 37-11 48-3 6-5 10-5 14 0 5 5 10 11 10 3 0 5 6 5 11 0 4-2 11-5 11-6 0-11 4-11 10 0 43-16 55-16 55-3 2-5 6-5 9l0 54c0 4 2 8 7 10 51 19 125 41 132 62 8 22 9 68 10 88l-363 0z m480-94c-8-25-49-51-138-84l0-20c7-7 19-25 21-61 4-2 7-5 10-9 4-5 6-13 6-20 0-13-5-23-13-28 7-15 19-41 13-64-4-15-21-31-40-39-19-7-38-6-54 5-5 3-6 10-3 15 3 4 10 6 15 3 12-9 25-6 34-3 15 6 25 18 27 24 4 17-6 40-12 52-3 6-4 10-4 13 0 3 1 6 3 8 2 2 4 3 7 3 4 0 6 6 6 11 0 3-1 6-3 8-1 2-2 2-3 2-6 0-10 5-10 11 0 43-17 55-17 55-3 2-5 5-5 9l0 32c0 4 3 8 7 10 83 31 127 56 133 73 7 22 9 68 10 88l-43 0c-6 0-11 5-11 11 0 6 5 11 11 11l53 0c6 0 11-5 11-11 0-3 0-74-11-105z"/&gt;
 &lt;/symbol&gt;

 &lt;symbol id="icon-arrow-down" viewBox="0 0 512 512"&gt;
 &lt;path d="m508 109c-4-4-11-3-15 1l-237 269-237-269c-4-4-11-5-15-1-5 4-5 11-1 15l245 278c2 2 5 3 8 3 3 0 6-1 8-3l245-278c4-4 4-11-1-15z"/&gt;
 &lt;/symbol&gt;

 &lt;symbol id="icon-arrow-left" viewBox="0 0 512 512"&gt;
 &lt;path d="m133 256l269-237c4-4 5-11 1-15-4-5-11-5-15-1l-278 245c-2 2-3 5-3 8 0 3 1 6 3 8l278 245c2 2 4 3 7 3 3 0 6-1 8-4 4-4 3-11-1-15z"/&gt;
 &lt;/symbol&gt;

 &lt;symbol id="icon-arrow-right" viewBox="0 0 512 512"&gt;
 &lt;path d="m402 248l-278-245c-4-4-11-4-15 1-4 4-3 11 1 15l269 237-269 237c-4 4-5 11-1 15 2 3 5 4 8 4 3 0 5-1 7-3l278-245c2-2 3-5 3-8 0-3-1-6-3-8z"/&gt;
 &lt;/symbol&gt;
&lt;/svg&gt;
</code></pre>

You can define your own icon sprite on <a href="http://fontastic.me/" rel="noreferrer">http://fontastic.me/</a> for free.

And the usage: <code>&lt;Icon name="arrow-down" color="#FFFFFF" size={35} /&gt;</code>

And possible add some simple styling for using the icons everywhere:

<pre><code>[class^="icon-"], [class*=" icon-"] {
 display: inline-block;
 vertical-align: middle;
}
</code></pre>

blocks|key|685411|text|您还可以导入.svg、.jpg、.png、.ttf等文件，例如：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|685412|++ReactDOM.render(
++++++<img+src={require("./svg/kiwi.svg")}/>,
++++++document.getElementById('root')
++);|code-block|syntax|javascript|685413|entityMap^0|6|4|B|4|G|4|L|4|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]|$9|P|A|Q|B|C]|$9|R|A|S|B|C]|$9|T|A|U|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|V|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|W|8|@]|D|@]|E|$]]]|L|$]]

You can also import <code>.svg</code>, <code>.jpg</code>, <code>.png</code>, <code>.ttf</code>, etc. files like:

<pre><code> ReactDOM.render(
 &lt;img src={require("./svg/kiwi.svg")}/&gt;,
 document.getElementById('root')
 );
</code></pre>

blocks|key|127640|text|如果使用创建-反应性-应用程序2.0，现在可以这样做：|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|127641|import+{+ReactComponent+as+YourSvg+}+from+'./your-svg.svg';|code-block|syntax|javascript|127642|然后使用它，就像通常使用组件一样：|127643|const+App+=+()+=>+(
+<div>
+++<YourSvg+/>
+</div>
);|127644|请注意，新名称必须大写，否则将无法将其识别为组件。|127645|entityMap|0|LINK|mutability|MUTABLE|url|https://facebook.github.io/create-react-app/docs/adding-images-fonts-and-files#adding-svgs^0|4|E|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@$A|X|B|Y|1|Z]]|C|$]]|$1|D|3|E|5|F|7|10|8|@]|9|@]|C|$G|H]]|$1|I|3|J|5|6|7|11|8|@]|9|@]|C|$]]|$1|K|3|L|5|F|7|12|8|@]|9|@]|C|$G|H]]|$1|M|3|N|5|6|7|13|8|@]|9|@]|C|$]]|$1|O|3|-4|5|6|7|14|8|@]|9|@]|C|$]]]|P|$Q|$5|R|S|T|C|$U|V]]]]

If you use <a href="https://facebook.github.io/create-react-app/docs/adding-images-fonts-and-files#adding-svgs" rel="noreferrer">create-react-app 2.0</a> you can now do it like this:
<pre><code>import { ReactComponent as YourSvg } from './your-svg.svg';
</code></pre>
And then use it just like you would normally use a component:
<pre><code>const App = () =&gt; (
 &lt;div&gt;
 &lt;YourSvg /&gt;
 &lt;/div&gt;
);
</code></pre>
Note that the new name must be capitalized, or else React won't recognize it as a component.

blocks|key|1845976|text|如果您的SVG包含精灵，下面是您可以使用的组件。我们有三四组精灵..。很明显，如果你只有一个精灵文件，你就可以把它拔出来。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1845977|雪碧成分：|1845978|import+React+from+'react'
import+PropTypes+from+'prop-types';

export+default+class+Sprite+extends+React.Component+{
++static+propTypes+=+{
++++label:+PropTypes.string,
++++group:+PropTypes.string,
++++sprite:+PropTypes.string.isRequired
++}

++filepath(spriteGroup)
++{
++++if(spriteGroup+==+undefined)+{++spriteGroup+=+'base'+}
++++return+"/asset_path/sprite_"+%2B+spriteGroup+%2B+".svg";
++}

++render()
++{
++++return(
++++++<svg+aria-hidden="true"+title={this.props.label}>
++++++++<use+xlinkHref={`${this.filepath(this.props.group)}#${this.props.sprite}`}></use>
++++++</svg>
++++)
++}
}|code-block|syntax|javascript|1845979|在其他的反应中，你会：|1845980|import+Sprite+from+'./Sprite';

render()
{
+++...
+++<Sprite+label="No+Current+Value"+group='base'+sprite='clock'+/>
}|1845981|我们的'base‘sprite文件中的示例是sprite_base.svg：|1845982|<svg+xmlns="http://www.w3.org/2000/svg">
++<defs>
++++<symbol+id="clock"+viewBox="0+0+512+512">
++++++<path+fill="currentColor"+d="M256+8C119+8+8+119+8+256s111+248+248+248+248-111+248-248S393+8+256+8zm216+248c0+118.7-96.1+216-216+216-118.7+0-216-96.1-216-216+0-118.7+96.1-216+216-216+118.7+0+216+96.1+216+216zm-148.9+88.3l-81.2-59c-3.1-2.3-4.9-5.9-4.9-9.7V116c0-6.6+5.4-12+12-12h14c6.6+0+12+5.4+12+12v146.3l70.5+51.3c5.4+3.9+6.5+11.4+2.6+16.8l-8.2+11.3c-3.9+5.3-11.4+6.5-16.8+2.6z"+class="">
++++++</path>
++++</symbol>
++++<symbol+id="arrow-up"+viewBox="0+0+16+16">
++++++<polygon+points="1.3,6.7+2.7,8.1+7,3.8+7,16+9,16+9,3.8+13.3,8.1+14.7,6.7+8,0+">+</polygon>
++++</symbol>
++++<symbol+id="arrow-down"+viewBox="0+0+16+16">
++++++<polygon+points="14.7,9.3+13.3,7.9+9,12.2+9,0+7,0+7,12.2+2.7,7.9+1.3,9.3+8,16+">+</polygon>
++++</symbol>
++++<symbol+id="download"+viewBox="0+0+48+48">
++++++<line+data-cap="butt"+fill="none"+stroke-width="3"+stroke-miterlimit="10"+x1="24"+y1="3"+x2="24"+y2="36"+stroke-linejoin="miter"+stroke-linecap="butt"></line>
++++++<polyline+fill="none"+stroke-width="3"+stroke-linecap="square"+stroke-miterlimit="10"+points="11,23+24,36+37,23+"+stroke-linejoin="miter"></polyline>
++++++<line+data-color="color-2"+fill="none"+stroke-width="3"+stroke-linecap="square"+stroke-miterlimit="10"+x1="2"+y1="45"+x2="46"+y2="45"+stroke-linejoin="miter"></line>
++++</symbol>
++</devs>
</svg>|1845983|entityMap^0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|T|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|U|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|V|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|W|8|@]|9|@]|A|$G|H]]|$1|M|3|N|5|6|7|X|8|@]|9|@]|A|$]]|$1|O|3|P|5|F|7|Y|8|@]|9|@]|A|$G|H]]|$1|Q|3|-4|5|6|7|Z|8|@]|9|@]|A|$]]]|R|$]]

If your SVG includes sprites, here's a component you can use. We have three or four groups of sprites... obviously you can pull that bit out if you only have one sprite file.

The Sprite component:

<pre><code>import React from 'react'
import PropTypes from 'prop-types';

export default class Sprite extends React.Component {
 static propTypes = {
 label: PropTypes.string,
 group: PropTypes.string,
 sprite: PropTypes.string.isRequired
 }

 filepath(spriteGroup)
 {
 if(spriteGroup == undefined) { spriteGroup = 'base' }
 return "/asset_path/sprite_" + spriteGroup + ".svg";
 }

 render()
 {
 return(
 &lt;svg aria-hidden="true" title={this.props.label}&gt;
 &lt;use xlinkHref={`${this.filepath(this.props.group)}#${this.props.sprite}`}&gt;&lt;/use&gt;
 &lt;/svg&gt;
 )
 }
}
</code></pre>

And elsewhere in React you would:

<pre><code>import Sprite from './Sprite';

render()
{
 ...
 &lt;Sprite label="No Current Value" group='base' sprite='clock' /&gt;
}
</code></pre>

Example from our 'base' sprite file, sprite_base.svg:

<pre><code>&lt;svg xmlns="http://www.w3.org/2000/svg"&gt;
 &lt;defs&gt;
 &lt;symbol id="clock" viewBox="0 0 512 512"&gt;
 &lt;path fill="currentColor" d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm216 248c0 118.7-96.1 216-216 216-118.7 0-216-96.1-216-216 0-118.7 96.1-216 216-216 118.7 0 216 96.1 216 216zm-148.9 88.3l-81.2-59c-3.1-2.3-4.9-5.9-4.9-9.7V116c0-6.6 5.4-12 12-12h14c6.6 0 12 5.4 12 12v146.3l70.5 51.3c5.4 3.9 6.5 11.4 2.6 16.8l-8.2 11.3c-3.9 5.3-11.4 6.5-16.8 2.6z" class=""&gt;
 &lt;/path&gt;
 &lt;/symbol&gt;
 &lt;symbol id="arrow-up" viewBox="0 0 16 16"&gt;
 &lt;polygon points="1.3,6.7 2.7,8.1 7,3.8 7,16 9,16 9,3.8 13.3,8.1 14.7,6.7 8,0 "&gt; &lt;/polygon&gt;
 &lt;/symbol&gt;
 &lt;symbol id="arrow-down" viewBox="0 0 16 16"&gt;
 &lt;polygon points="14.7,9.3 13.3,7.9 9,12.2 9,0 7,0 7,12.2 2.7,7.9 1.3,9.3 8,16 "&gt; &lt;/polygon&gt;
 &lt;/symbol&gt;
 &lt;symbol id="download" viewBox="0 0 48 48"&gt;
 &lt;line data-cap="butt" fill="none" stroke-width="3" stroke-miterlimit="10" x1="24" y1="3" x2="24" y2="36" stroke-linejoin="miter" stroke-linecap="butt"&gt;&lt;/line&gt;
 &lt;polyline fill="none" stroke-width="3" stroke-linecap="square" stroke-miterlimit="10" points="11,23 24,36 37,23 " stroke-linejoin="miter"&gt;&lt;/polyline&gt;
 &lt;line data-color="color-2" fill="none" stroke-width="3" stroke-linecap="square" stroke-miterlimit="10" x1="2" y1="45" x2="46" y2="45" stroke-linejoin="miter"&gt;&lt;/line&gt;
 &lt;/symbol&gt;
 &lt;/devs&gt;
&lt;/svg&gt;
</code></pre>

blocks|key|127688|text|只需将路径写入图像的src中。看起来不错。像这样：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|127689|<img+alt="Clock"+src={require('../assets/images/search_icon.svg')}/>|code-block|syntax|javascript|127690|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|$]]

Just write require with path inside the src of image. it will work.
like:

<pre><code>&lt;img alt="Clock" src={require('../assets/images/search_icon.svg')}/&gt;
</code></pre>

blocks|key|685457|text|如果您有.svg或本地图像。首先，您必须安装svg所需的加载程序和映像的文件加载程序。然后您必须首先导入您的图标或图像，例如：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|685458|import+logo+from+'./logos/myLogo.svg'+;
import+image+from+'./images/myimage.png';

const+temp+=+(
+++++<div>
+++++++++<img+src={logo}+/>
+++++++++<img+src={image}+/>
+++++</div>
);

ReactDOM.render(temp,document.getElementByID("app"));|code-block|syntax|javascript|685459|快乐编码:")|685460|来自react网站的资源，经过多次搜索后为我工作：https://create-react-app.dev/docs/adding-images-fonts-and-files/|offset|length|685461|entityMap|0|LINK|mutability|MUTABLE|url|https://create-react-app.dev/docs/adding-images-fonts-and-files/^0|0|0|0|P|1S|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|V|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|W|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|X|8|@]|9|@$K|Y|L|Z|1|10]]|A|$]]|$1|M|3|-4|5|6|7|11|8|@]|9|@]|A|$]]]|N|$O|$5|P|Q|R|A|$S|T]]]]

if you have .svg or an image locally. first you have to install the loader needed for svg and file-loader for images. Then you have to import your icon or image first for example: 

<pre><code>import logo from './logos/myLogo.svg' ;
import image from './images/myimage.png';

const temp = (
 &lt;div&gt;
 &lt;img src={logo} /&gt;
 &lt;img src={image} /&gt;
 &lt;/div&gt;
);

ReactDOM.render(temp,document.getElementByID("app"));

</code></pre>

Happy Coding :")

resources from react website and worked for me after many searches:
<a href="https://create-react-app.dev/docs/adding-images-fonts-and-files/" rel="noreferrer">https://create-react-app.dev/docs/adding-images-fonts-and-files/</a>

blocks|key|682931|text|如果您希望使用SVG文件作为app组件来执行自定义，并且不使用create+app，请执行以下操作：|type|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|entityRanges|data|682932|安装名为svgr的Webpack加载程序|ordered-list-item|682933|yarn+add+--dev+@svgr/webpack|code-block|syntax|javascript|682934|更新您的webpack.config.js|CODE|682935|++...
++module:+{
++++rules:+[
++++++...
++++++//+SVG+loader
++++++{
++++++++test:+/\.svg$/,
++++++++use:+['@svgr/webpack'],
++++++}
++++],
++},
++...|682936|导入SVG文件作为React组件|682937|import+SomeImage+from+'path/to/image.svg'

...

<SomeImage+width={100}+height={50}+fill="pink"+stroke="#0066ff"+/>|682938|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/gregberge/svgr^0|S|D|0|4|4|0|0|0|4|H|0|0|0|0^^$0|@$1|2|3|4|5|6|7|14|8|@$9|15|A|16|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|17|8|@]|D|@$9|18|A|19|1|1A]]|E|$]]|$1|I|3|J|5|K|7|1B|8|@]|D|@]|E|$L|M]]|$1|N|3|O|5|H|7|1C|8|@$9|1D|A|1E|B|P]]|D|@]|E|$]]|$1|Q|3|R|5|K|7|1F|8|@]|D|@]|E|$L|M]]|$1|S|3|T|5|H|7|1G|8|@]|D|@]|E|$]]|$1|U|3|V|5|K|7|1H|8|@]|D|@]|E|$L|M]]|$1|W|3|-4|5|6|7|1I|8|@]|D|@]|E|$]]]|X|$Y|$5|Z|10|11|E|$12|13]]]]

If you want to use SVG files as React components to perform customizations and do not use create-react-app, do the following:
<ol>
<li>Install the Webpack loader called <a href="https://github.com/gregberge/svgr" rel="nofollow noreferrer">svgr</a></li>
</ol>
<pre><code>yarn add --dev @svgr/webpack
</code></pre>
<ol start="2">
<li>Update your <code>webpack.config.js</code></li>
</ol>
<pre><code> ...
 module: {
 rules: [
 ...
 // SVG loader
 {
 test: /\.svg$/,
 use: ['@svgr/webpack'],
 }
 ],
 },
 ...
</code></pre>
<ol start="3">
<li>Import SVG files as React component</li>
</ol>
<pre><code>import SomeImage from 'path/to/image.svg'

...

&lt;SomeImage width={100} height={50} fill=&quot;pink&quot; stroke=&quot;#0066ff&quot; /&gt;
</code></pre>

blocks|key|127745|text|由于以上提到的一些原因，在我遵循如下添加.default的建议之前，上述方法对我不起作用：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|127746|<div>
++<img+src={require('../../mySvgImage.svg').default}+alt='mySvgImage'+/>
</div>|code-block|syntax|javascript|127747|entityMap^0|K|8|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|P|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|Q|8|@]|D|@]|E|$]]]|L|$]]

For some reasons above mentioned approaches did not work for me, before I followed the advice to add <code>.default</code> like this:
<pre><code>&lt;div&gt;
 &lt;img src={require('../../mySvgImage.svg').default} alt='mySvgImage' /&gt;
&lt;/div&gt;
</code></pre>

blocks|key|127760|text|很难相信添加自定义图标是如此复杂。我找到了与上面发布的类似的解决方案，但是对于我来说，直到我在文本编辑器中打开SVG直接获得的viewBox信息之后，我才能让图标显示出来。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|127761|//customIcon.js

import+React+from+"react";
import+{ReactComponent+as+ImportedSVG}+from+"path/to/myIcon.svg";
import+{+SvgIcon+}+from+'@material-ui/core';

function+CustomIcon()+{
+return(
++<SvgIcon+component={ImportedSVG}+viewBox="0+0+384+512"/>

)
}

export+default+CustomIcon;|code-block|syntax|javascript|127762|我还在名称空间中遇到了一个错误，必须清理SVG才能正常工作，这是这个职位的建议。|offset|length|127763|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/a/64726191/2264463^0|0|0|W|4|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|U|8|@]|9|@$I|V|J|W|1|X]]|A|$]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|R]]]]

Hard to believe adding a custom icon is so complicated. I found a similar solution to those posted above, but for me, I could not get the icon to display until I added the viewBox info, which I got directly from opening the SVG in a text editor.
<pre><code>//customIcon.js

import React from &quot;react&quot;;
import {ReactComponent as ImportedSVG} from &quot;path/to/myIcon.svg&quot;;
import { SvgIcon } from '@material-ui/core';

function CustomIcon() {
 return(
 &lt;SvgIcon component={ImportedSVG} viewBox=&quot;0 0 384 512&quot;/&gt;

)
}

export default CustomIcon;
</code></pre>
I also ran into an error with namespaces and had to clean up the SVG before it would work, following advice from <a href="https://stackoverflow.com/a/64726191/2264463">this post</a>

blocks|key|1846152|text|在这里，我找到了一个简单的解决方案，不需要弹出，我们不需要安装其他依赖项，比如react-app-rewired。因为如果您想使用SVG作为组件，我们需要更新create-react-app的webpack配置。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1846153|方法1:|BOLD|1846154|import+{+ReactComponent+as+YourSvg+}+from+'./your-svg.svg';

const+App+=+()+=>+(
+<div>
+++<YourSvg+/>
+</div>
);|code-block|syntax|javascript|1846155|我们可以这样做，但它只在create-react-app-2.0上，按照上面的答案。|1846156|方法2:|1846157|我们需要更新create-react-app的webpack配置。|1846158|去node_modules/react-scripts/config/webpack.config.js。|ordered-list-item|1846159|去the+line+number+600。|1846160|注意：这里您将看到以下信息|1846161|++++++++++++//+"file"+loader+makes+sure+those+assets+get+served+by+WebpackDevServer.
++++++++++++//+When+you+`import`+an+asset,+you+get+its+(virtual)+filename.
++++++++++++//+In+production,+they+would+get+copied+to+the+`build`+folder.
++++++++++++//+This+loader+doesn't+use+a+"test"+so+it+will+catch+all+modules
++++++++++++//+that+fall+through+the+other+loaders.
++++++++++++{
++++++++++++++loader:+require.resolve('file-loader'),
++++++++++++++//+Exclude+`js`+files+to+keep+"css"+loader+working+as+it+injects
++++++++++++++//+its+runtime+that+would+otherwise+be+processed+through+"file"+loader.
++++++++++++++//+Also+exclude+`html`+and+`json`+extensions+so+they+get+processed
++++++++++++++//+by+webpacks+internal+loaders.
++++++++++++++exclude:+[/\.(js%7Cmjs%7Cjsx%7Cts%7Ctsx)$/,+/\.html$/,+/\.json$/],
++++++++++++++options:+{
++++++++++++++++name:+'static/media/[name].[hash:8].[ext]',
++++++++++++++},
++++++++++++},
++++++++++++//+**+STOP+**+Are+you+adding+a+new+loader?
++++++++++++//+Make+sure+to+add+the+new+loader(s)+before+the+"file"+loader.|1846162|在上面的file-loader.中添加下面一行的|1846163|+++++++++//+#1+Custom+loader+for+handling+svg+images+
++++++++++++{
++++++++++++++test:+/\.svg$/,
++++++++++++++use:+['@svgr/webpack']
++++++++++++},|1846164|就这样|1846165|如何在反应组件中使用SVG？|1846166|import+ChevronRight+from+'../../../assets/icons/feather/chevron-right.svg';

const+Links+=+()+=>+{
++return+(
++++++++++<ChevronRight+height={25}+width={25}+/>++++
++++++);
};

export+default+Links;|1846167|entityMap^0|13|H|27|G|0|0|4|0|0|C|K|0|0|4|0|6|G|0|1|1F|0|1|J|0|3|A|0|0|4|B|0|0|0|0|E|0|0^^$0|@$1|2|3|4|5|6|7|1E|8|@$9|1F|A|1G|B|C]|$9|1H|A|1I|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|1J|8|@$9|1K|A|1L|B|H]]|D|@]|E|$]]|$1|I|3|J|5|K|7|1M|8|@]|D|@]|E|$L|M]]|$1|N|3|O|5|6|7|1N|8|@$9|1O|A|1P|B|C]]|D|@]|E|$]]|$1|P|3|Q|5|6|7|1Q|8|@$9|1R|A|1S|B|H]]|D|@]|E|$]]|$1|R|3|S|5|6|7|1T|8|@$9|1U|A|1V|B|C]]|D|@]|E|$]]|$1|T|3|U|5|V|7|1W|8|@$9|1X|A|1Y|B|C]]|D|@]|E|$]]|$1|W|3|X|5|V|7|1Z|8|@$9|20|A|21|B|C]]|D|@]|E|$]]|$1|Y|3|Z|5|6|7|22|8|@$9|23|A|24|B|H]]|D|@]|E|$]]|$1|10|3|11|5|K|7|25|8|@]|D|@]|E|$L|M]]|$1|12|3|13|5|V|7|26|8|@$9|27|A|28|B|H]]|D|@]|E|$]]|$1|14|3|15|5|K|7|29|8|@]|D|@]|E|$L|M]]|$1|16|3|17|5|6|7|2A|8|@]|D|@]|E|$]]|$1|18|3|19|5|6|7|2B|8|@$9|2C|A|2D|B|H]]|D|@]|E|$]]|$1|1A|3|1B|5|K|7|2E|8|@]|D|@]|E|$L|M]]|$1|1C|3|-4|5|6|7|2F|8|@]|D|@]|E|$]]]|1D|$]]

Here I found a simple solution without ejecting and we don't need to install other dependencies like <code>react-app-rewired</code>. Because If you want to use SVG as a component we need to update the webpack config of <code>create-react-app</code>.
Method 1:
<pre><code>import { ReactComponent as YourSvg } from './your-svg.svg';

const App = () =&gt; (
 &lt;div&gt;
 &lt;YourSvg /&gt;
 &lt;/div&gt;
);
</code></pre>
We can do it like this but it's only on <code>create-react-app-2.0</code> as per the above answer.
Method 2:
We need to update the webpack configuration of <code>create-react-app</code>.
<ol>
<li>Go to <code>node_modules/react-scripts/config/webpack.config.js</code>.</li>
<li>Go to <code>the line number 600</code>.</li>
</ol>
Note:Here you'll see the following info
<pre class="lang-js prettyprint-override"><code> // &quot;file&quot; loader makes sure those assets get served by WebpackDevServer.
 // When you `import` an asset, you get its (virtual) filename.
 // In production, they would get copied to the `build` folder.
 // This loader doesn't use a &quot;test&quot; so it will catch all modules
 // that fall through the other loaders.
 {
 loader: require.resolve('file-loader'),
 // Exclude `js` files to keep &quot;css&quot; loader working as it injects
 // its runtime that would otherwise be processed through &quot;file&quot; loader.
 // Also exclude `html` and `json` extensions so they get processed
 // by webpacks internal loaders.
 exclude: [/\.(js|mjs|jsx|ts|tsx)$/, /\.html$/, /\.json$/],
 options: {
 name: 'static/media/[name].[hash:8].[ext]',
 },
 },
 // ** STOP ** Are you adding a new loader?
 // Make sure to add the new loader(s) before the &quot;file&quot; loader.
</code></pre>
<ol start="3">
<li>Add the following line to the above file-loader.</li>
</ol>
<pre class="lang-js prettyprint-override"><code> // #1 Custom loader for handling svg images 
 {
 test: /\.svg$/,
 use: ['@svgr/webpack']
 },
</code></pre>
That's it 
How to use SVG inside react component?
<pre><code>import ChevronRight from '../../../assets/icons/feather/chevron-right.svg';

const Links = () =&gt; {
 return (
 &lt;ChevronRight height={25} width={25} /&gt; 
 );
};

export default Links;
</code></pre>

blocks|key|1846173|text|您可以通过此站点将SVGs转换为可行的反应性组件。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1846174|entityMap|0|LINK|mutability|MUTABLE|url|https://react-svgr.com/playground/^0|6|2|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@$A|M|B|N|1|O]]|C|$]]|$1|D|3|-4|5|6|7|P|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]]]

You can turn your SVGs to a viable React Component through this <a href="https://react-svgr.com/playground/" rel="nofollow noreferrer">site</a>

blocks|key|682978|text|我很想知道如何从远程主机(例如从CDN+)添加SVG作为ReactComponent。我会用它作为|type|unstyled|depth|inlineStyleRanges|entityRanges|data|682979|http://URL/FILE.svg，但这不适合我的用例。|offset|length|682980|我想看看我能不能把它当作|682981|将{+ReactComponent作为SvgIcon+}从"http://URL/FILE.svg“导入|682982|entityMap|0|LINK|mutability|MUTABLE|url|http://url/FILE.svg|1^0|0|0|J|0|0|0|U|J|1|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|T|8|@]|9|@$D|U|E|V|1|W]]|A|$]]|$1|F|3|G|5|6|7|X|8|@]|9|@]|A|$]]|$1|H|3|I|5|6|7|Y|8|@]|9|@$D|Z|E|10|1|11]]|A|$]]|$1|J|3|-4|5|6|7|12|8|@]|9|@]|A|$]]]|K|$L|$5|M|N|O|A|$P|Q]]|R|$5|M|N|O|A|$P|Q]]]]

I am interesting to know how I can add the SVG as ReactComponent from a remote host, for example from CDN. I would use it as
<a href="http://URL/FILE.svg" rel="nofollow noreferrer">http://URL/FILE.svg</a> But this is not suitable for my use case.
I would like to see if I can use it as
import { ReactComponent as SvgIcon } from &quot;http://URL/FILE.svg&quot;

blocks|key|1846215|text|如果您的React项目中有重要的UI库，则可以执行以下操作：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1846216|import+React+from+'react';
import+{+SvgIcon+}+from+'@material-ui/core';

export+function+NewIcon()+{
++return+(
++++<SvgIcon+viewBox="0+0+48+48">+//+you+may+change+the+viewBox,+so+the+image+will+fit+into+it
++++++<path+d="M12,4A4,4+0+0,1+16,8A4,4+0+0,1+12,12A4,4+0+0,1+8,8A4,4+0+0,1+12,4M12,14C16.42,14+20,15.79+20,18V20H4V18C4,15.79+7.58,14+12,14Z"+/>
++++</SvgIcon>
++)
}|code-block|syntax|javascript|1846217|这将自动改变SVG的颜色，当主题被改变(光明/黑暗)。另外，你可以根据你的意愿改变它的颜色和大小。|1846218|import+React+from+'react';
import+{+styled,+SvgIcon+}+from+'@material-ui/core';

const+SvgImage+=+styled(SvgIcon)(()+=>+({
++height:+'40px',
++width:+'40px',
++color:+'red',
}));

export+function+NewIcon()+{
++return+(
++++<SvgImage+viewBox="0+0+48+48">
++++++<path+d="M12,4A4,4+0+0,1+16,8A4,4+0+0,1+12,12A4,4+0+0,1+8,8A4,4+0+0,1+12,4M12,14C16.42,14+20,15.79+20,18V20H4V18C4,15.79+7.58,14+12,14Z"+/>
++++</SvgImage>
++);
}|1846219|文档：https://mui.com/components/icons/#svgicon|offset|length|1846220|entityMap|0|LINK|mutability|MUTABLE|url|https://mui.com/components/icons/#svgicon^0|0|0|0|0|3|15|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|X|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Y|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|Z|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|10|8|@]|9|@$M|11|N|12|1|13]]|A|$]]|$1|O|3|-4|5|6|7|14|8|@]|9|@]|A|$]]]|P|$Q|$5|R|S|T|A|$U|V]]]]

If you have Material UI library in your React project, you can do the follow:
<pre><code>import React from 'react';
import { SvgIcon } from '@material-ui/core';

export function NewIcon() {
 return (
 &lt;SvgIcon viewBox=&quot;0 0 48 48&quot;&gt; // you may change the viewBox, so the image will fit into it
 &lt;path d=&quot;M12,4A4,4 0 0,1 16,8A4,4 0 0,1 12,12A4,4 0 0,1 8,8A4,4 0 0,1 12,4M12,14C16.42,14 20,15.79 20,18V20H4V18C4,15.79 7.58,14 12,14Z&quot; /&gt;
 &lt;/SvgIcon&gt;
 )
}
</code></pre>
This will automatically change the SVG color when the Theme is changed (Light/Dark). Plus you can change its color and size as you wish e.g.
<pre><code>import React from 'react';
import { styled, SvgIcon } from '@material-ui/core';

const SvgImage = styled(SvgIcon)(() =&gt; ({
 height: '40px',
 width: '40px',
 color: 'red',
}));

export function NewIcon() {
 return (
 &lt;SvgImage viewBox=&quot;0 0 48 48&quot;&gt;
 &lt;path d=&quot;M12,4A4,4 0 0,1 16,8A4,4 0 0,1 12,12A4,4 0 0,1 8,8A4,4 0 0,1 12,4M12,14C16.42,14 20,15.79 20,18V20H4V18C4,15.79 7.58,14 12,14Z&quot; /&gt;
 &lt;/SvgImage&gt;
 );
}
</code></pre>
Documentation: <a href="https://mui.com/components/icons/#svgicon" rel="nofollow noreferrer">https://mui.com/components/icons/#svgicon</a>

blocks|key|685584|text|作为附加信息，如果您使用的是NextJs，则显示SVG的最简单方法是导入SVG，然后使用<Image+/>+NextJs组件：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|685585|import+Image+from+'next/image';
import+SVGIcon+from+'your/svg/path/icon.svg';

<Image
++src={SVGIcon}
++alt="Logo+-+SVG"
++width="40"
++height="40"
/>|code-block|syntax|javascript|685586|entityMap^0|18|9|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|P|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|Q|8|@]|D|@]|E|$]]]|L|$]]

As additional info, if you are using NextJs, the easiest way to display a SVG is by importing your SVG and then using the <code>&lt;Image /&gt;</code> NextJs component:
<pre><code>import Image from 'next/image';
import SVGIcon from 'your/svg/path/icon.svg';

&lt;Image
 src={SVGIcon}
 alt=&quot;Logo - SVG&quot;
 width=&quot;40&quot;
 height=&quot;40&quot;
/&gt;
</code></pre>

I have seen a lot of libraries for svg on react but none gave me how to import an svg file in the react component. I have seen code which talk about bring the svg code into react rather than using the .svg icon as image and show it in the UI.
Please let me know if there are ways to embed the icon.

How to display svg icons(.svg files) in UI using React Component?

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

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

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

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

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

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

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

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我已经看到了许多svg在react上的库，但是没有一个库给我介绍如何在react组件中导入svg文件。我已经看到了一些代码，它们讨论如何将svg代码引入到响应中，而不是使用.svg图标作为图像并在UI中显示它。如果有方法嵌入图标，请让我知道。

问如何使用React组件在UI中显示svg图标(.svg文件)？
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使用React组件在UI中显示svg图标(.svg文件)？EN