我从设计师那里得到了以下svg文件，我只想渲染某些图标，我想这个svg包括所有图标：
这是svg：
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 22.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 64 64" style="enable-background:new 0 0 64 64;" xml:space="preserve">
<style type="text/css">
.st0{display:none;}
.st1{display:inline;}
.st2{fill:none;stroke:#000000;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
</style>
<g id="Home" class="st0">
<g id="gen-home" class="st1">
<path d="M58.2,33.4c-0.2,0-0.5-0.1-0.7-0.3L32.1,7.8L6.8,33.1c-0.4,0.4-1,0.4-1.4,0c-0.4-0.4-0.4-1,0-1.4l26-26
c0.4-0.4,1-0.4,1.4,0l26,26c0.4,0.4,0.4,1,0,1.4C58.7,33.3,58.4,33.4,58.2,33.4z"/>
<path d="M54.3,58.5H37c-0.5,0-1-0.4-1-1V43.1h-7.7v14.5c0,0.5-0.4,1-1,1H10c-0.5,0-1-0.4-1-1V33.4c0-0.5,0.4-1,1-1s1,0.4,1,1v23.1
h15.4V42.1c0-0.5,0.4-1,1-1H37c0.5,0,1,0.4,1,1v14.5h15.4V33.4c0-0.5,0.4-1,1-1c0.5,0,1,0.4,1,1v24.1C55.3,58,54.8,58.5,54.3,58.5
z"/>
<path d="M54.3,24.8c-0.5,0-1-0.4-1-1V12.2h-5.8v3.9c0,0.5-0.4,1-1,1s-1-0.4-1-1v-4.8c0-0.5,0.4-1,1-1h7.7c0.5,0,1,0.4,1,1v12.5
C55.3,24.3,54.8,24.8,54.3,24.8z"/>
</g>
</g>
<g id="Editions" class="st0">
<g id="dri-cup-tea" class="st1">
<path d="M53.9,39.7h-4.8c-0.5,0-1-0.4-1-1c0-0.5,0.4-1,1-1h4.8c2.1,0,3.9-1.7,3.9-3.9v-3.9c0-2.1-1.7-3.9-3.9-3.9h-4.8
c-0.5,0-1-0.4-1-1s0.4-1,1-1h4.8c3.2,0,5.8,2.6,5.8,5.8v3.9C59.7,37.1,57.1,39.7,53.9,39.7z"/>
<path d="M30.8,59c-10.6,0-19.3-8.6-19.3-19.3V25.2c0-0.5,0.4-1,1-1h36.6c0.5,0,1,0.4,1,1v14.5C50.1,50.3,41.4,59,30.8,59z
M13.5,26.2v13.5c0,9.6,7.8,17.3,17.3,17.3s17.3-7.8,17.3-17.3V26.2H13.5z"/>
<path d="M56.8,59h-52c-0.5,0-1-0.4-1-1c0-0.5,0.4-1,1-1h52c0.5,0,1,0.4,1,1C57.8,58.5,57.4,59,56.8,59z"/>
<path d="M21.2,20.4c-0.5,0-1-0.4-1-1s0.4-1,1-1c1.1,0,1.9-0.9,1.9-1.9c0-0.8-0.6-1.4-1.7-2.3c-0.3-0.3-0.6-0.6-1-0.9
c-0.2-0.2-0.5-0.5-0.8-0.7c-1.1-1-2.4-2.2-2.4-3.8c0-2.1,1.7-3.9,3.9-3.9c0.5,0,1,0.4,1,1s-0.4,1-1,1c-1.1,0-1.9,0.9-1.9,1.9
c0,0.8,0.9,1.6,1.8,2.4c0.3,0.3,0.6,0.5,0.8,0.8c0.3,0.3,0.6,0.6,0.9,0.8c1.1,1,2.3,2.1,2.3,3.7C25,18.7,23.3,20.4,21.2,20.4z"/>
<path d="M30.8,20.4c-0.5,0-1-0.4-1-1s0.4-1,1-1c1.1,0,1.9-0.9,1.9-1.9c0-0.8-0.6-1.4-1.7-2.3c-0.3-0.3-0.6-0.6-1-0.9
c-0.2-0.2-0.5-0.5-0.8-0.7c-1.1-1-2.4-2.2-2.4-3.8C27,6.7,28.7,5,30.8,5c0.5,0,1,0.4,1,1s-0.4,1-1,1c-1.1,0-1.9,0.9-1.9,1.9
c0,0.8,0.9,1.6,1.8,2.4c0.3,0.3,0.6,0.5,0.8,0.8c0.3,0.3,0.6,0.6,0.9,0.8c1.1,1,2.3,2.1,2.3,3.7C34.7,18.7,32.9,20.4,30.8,20.4z"
/>
<path d="M40.5,20.4c-0.5,0-1-0.4-1-1s0.4-1,1-1c1.1,0,1.9-0.9,1.9-1.9c0-0.8-0.6-1.4-1.7-2.3c-0.3-0.3-0.6-0.6-1-0.9
c-0.2-0.2-0.5-0.5-0.8-0.7c-1.1-1-2.4-2.2-2.4-3.8c0-2.1,1.7-3.9,3.9-3.9c0.5,0,1,0.4,1,1s-0.4,1-1,1c-1.1,0-1.9,0.9-1.9,1.9
c0,0.8,0.9,1.6,1.8,2.4c0.3,0.3,0.6,0.5,0.8,0.8c0.3,0.3,0.6,0.6,0.9,0.8c1.1,1,2.3,2.1,2.3,3.7C44.3,18.7,42.6,20.4,40.5,20.4z"
/>
</g>
</g>
<g id="Search" class="st0">
<g id="ios-search_1_" class="st1">
<path d="M27.8,45.7c-10.1,0-18.3-8.2-18.3-18.3S17.8,9.1,27.8,9.1s18.3,8.2,18.3,18.3S37.9,45.7,27.8,45.7z M27.8,11
c-9,0-16.4,7.3-16.4,16.4s7.3,16.4,16.4,16.4s16.4-7.3,16.4-16.4S36.9,11,27.8,11z"/>
<rect x="45" y="36" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -19.1196 46.7971)" width="3.9" height="21"/>
</g>
</g>
<g id="Latest_news" class="st0">
<g id="gen-heart-rate-2" class="st1">
<path d="M36.9,54.1C36.9,54.1,36.9,54.1,36.9,54.1c-0.5,0-0.9-0.3-0.9-0.8l-7.7-37.8l-5.8,28.2c-0.1,0.4-0.4,0.7-0.9,0.8
c-0.4,0-0.8-0.2-1-0.6l-2.7-7.1H4.1c-0.5,0-1-0.4-1-1c0-0.5,0.4-1,1-1h14.5c0.4,0,0.8,0.2,0.9,0.6l1.7,4.6l6.1-29.5
c0.1-0.4,0.5-0.8,0.9-0.8c0,0,0,0,0,0c0.5,0,0.9,0.3,0.9,0.8L37,49l5.7-21.1c0.1-0.4,0.5-0.7,0.9-0.7c0.4,0,0.8,0.2,0.9,0.6
l2.7,7.1H60c0.5,0,1,0.4,1,1c0,0.5-0.4,1-1,1H46.5c-0.4,0-0.8-0.2-0.9-0.6l-1.8-4.9l-6,22.2C37.7,53.8,37.3,54.1,36.9,54.1z"/>
</g>
</g>
<g id="Hamburger" class="st0">
<g id="ui-menu-circle_2_" class="st1">
<path d="M31.8,58c-14.3,0-26-11.7-26-26s11.7-26,26-26s26,11.7,26,26S46.2,58,31.8,58z M31.8,7.9C18.5,7.9,7.7,18.7,7.7,32
s10.8,24.1,24.1,24.1S55.9,45.3,55.9,32S45.1,7.9,31.8,7.9z"/>
<path d="M45.3,23.3h-27c-0.5,0-1-0.4-1-1s0.4-1,1-1h27c0.5,0,1,0.4,1,1S45.8,23.3,45.3,23.3z"/>
<path d="M45.3,32.9h-27c-0.5,0-1-0.4-1-1c0-0.5,0.4-1,1-1h27c0.5,0,1,0.4,1,1C46.3,32.5,45.8,32.9,45.3,32.9z"/>
<path d="M45.3,42.6h-27c-0.5,0-1-0.4-1-1c0-0.5,0.4-1,1-1h27c0.5,0,1,0.4,1,1C46.3,42.1,45.8,42.6,45.3,42.6z"/>
</g>
</g>
<g id="Textsize">
<g id="typ-caps-small">
<polyline class="st2" points="6,22.4 6,16.3 30.5,16.3 30.5,22.4 "/>
<path class="st2" d="M18.2,44.8c0,2.3,1.8,4.1,4.1,4.1h-8.2C16.4,48.9,18.2,47.1,18.2,44.8V16.3"/>
<path class="st2" d="M24.3,16.3"/>
<path class="st2" d="M6,19.4c0-1.7,1.4-3.1,3.1-3.1"/>
<path class="st2" d="M30.5,19.4c0-1.7-1.4-3.1-3.1-3.1"/>
<polyline class="st2" points="38.6,32.6 38.6,26.5 59,26.5 59,32.6 "/>
<path class="st2" d="M48.8,44.8c0,2.3,1.8,4.1,4.1,4.1h-8.2C47,48.9,48.8,47.1,48.8,44.8V26.5"/>
<path class="st2" d="M52.9,26.5"/>
<path class="st2" d="M38.6,29.6c0-1.7,1.4-3.1,3.1-3.1"/>
<path class="st2" d="M59,29.6c0-1.7-1.4-3.1-3.1-3.1"/>
</g>
</g>
<g id="Text-to-speech" class="st0">
<g id="mus-vol-high_2_" class="st1">
<path class="st2" d="M34.6,10c-0.4,0-0.8,0.1-1.1,0.4L17,24.1h-6.2c-1.5,0-2.6,1.2-2.6,2.6v10.6c0,1.5,1.2,2.6,2.6,2.6H17
l16.5,13.7c0.3,0.2,0.7,0.4,1.1,0.4c1,0,1.8-0.8,1.8-1.8V11.8C36.4,10.8,35.6,10,34.6,10z"/>
<path class="st2" d="M36.4,40.6c3.1-1.6,5.3-4.9,5.3-8.6s-2.1-7-5.3-8.6"/>
<path class="st2" d="M48.9,47.2c4.2-3.7,6.8-9.1,6.8-15.2c0-6-2.6-11.4-6.8-15.1"/>
<path class="st2" d="M43.9,42.2c2.9-2.4,4.8-6.1,4.8-10.2c0-4.1-1.9-7.7-4.8-10.1"/>
</g>
</g>
</svg>
我确实有一个看起来像这样的react组件：
import React from 'react';
function TextSizeLogo() {
return (
<svg viewBox="0 0 64 64">
<polyline className="st2" points="6,22.4 6,16.3 30.5,16.3 30.5,22.4 "/>
<path className="st2" d="M18.2,44.8c0,2.3,1.8,4.1,4.1,4.1h-8.2C16.4,48.9,18.2,47.1,18.2,44.8V16.3"/>
<path className="st2" d="M24.3,16.3"/>
<path className="st2" d="M6,19.4c0-1.7,1.4-3.1,3.1-3.1"/>
<path className="st2" d="M30.5,19.4c0-1.7-1.4-3.1-3.1-3.1"/>
<polyline className="st2" points="38.6,32.6 38.6,26.5 59,26.5 59,32.6 "/>
<path className="st2" d="M48.8,44.8c0,2.3,1.8,4.1,4.1,4.1h-8.2C47,48.9,48.8,47.1,48.8,44.8V26.5"/>
<path className="st2" d="M52.9,26.5"/>
<path className="st2" d="M38.6,29.6c0-1.7,1.4-3.1,3.1-3.1"/>
<path className="st2" d="M59,29.6c0-1.7-1.4-3.1-3.1-3.1"/>
</svg>
);
}
export default TextSizeLogo;
由于某些原因，我只想渲染id为的元素。
知道为什么吗？
答案 0 :(得分：1)
创建一个通用徽标组件，您可以使用<Icon name="textsize" />格式。
// icon.js
const Icon = ({name}) => (
<svg viewBox="0 0 64 64">
{name === 'home' && (
<g id="Home">
<path d="M58.2,33.4c-0.2,0-0.5-0.1-0.7-0.3L32.1,7.8L6.8,33.1c-0.4,0.4-1,0.4-1.4,0c-0.4-0.4-0.4-1,0-1.4l26-26c0.4-0.4,1-0.4,1.4,0l26,26c0.4,0.4,0.4,1,0,1.4C58.7,33.3,58.4,33.4,58.2,33.4z" />
<path d="M54.3,58.5H37c-0.5,0-1-0.4-1-1V43.1h-7.7v14.5c0,0.5-0.4,1-1,1H10c-0.5,0-1-0.4-1-1V33.4c0-0.5,0.4-1,1-1s1,0.4,1,1v23.1h15.4V42.1c0-0.5,0.4-1,1-1H37c0.5,0,1,0.4,1,1v14.5h15.4V33.4c0-0.5,0.4-1,1-1c0.5,0,1,0.4,1,1v24.1C55.3,58,54.8,58.5,54.3,58.5z" />
<path d="M54.3,24.8c-0.5,0-1-0.4-1-1V12.2h-5.8v3.9c0,0.5-0.4,1-1,1s-1-0.4-1-1v-4.8c0-0.5,0.4-1,1-1h7.7c0.5,0,1,0.4,1,1v12.5C55.3,24.3,54.8,24.8,54.3,24.8z" />
</g>
)}
{name === 'editions' && (
<g id="Editions">
<path d="M53.9,39.7h-4.8c-0.5,0-1-0.4-1-1c0-0.5,0.4-1,1-1h4.8c2.1,0,3.9-1.7,3.9-3.9v-3.9c0-2.1-1.7-3.9-3.9-3.9h-4.8c-0.5,0-1-0.4-1-1s0.4-1,1-1h4.8c3.2,0,5.8,2.6,5.8,5.8v3.9C59.7,37.1,57.1,39.7,53.9,39.7z" />
<path d="M30.8,59c-10.6,0-19.3-8.6-19.3-19.3V25.2c0-0.5,0.4-1,1-1h36.6c0.5,0,1,0.4,1,1v14.5C50.1,50.3,41.4,59,30.8,59zM13.5,26.2v13.5c0,9.6,7.8,17.3,17.3,17.3s17.3-7.8,17.3-17.3V26.2H13.5z" />
<path d="M56.8,59h-52c-0.5,0-1-0.4-1-1c0-0.5,0.4-1,1-1h52c0.5,0,1,0.4,1,1C57.8,58.5,57.4,59,56.8,59z" />
<path d="M21.2,20.4c-0.5,0-1-0.4-1-1s0.4-1,1-1c1.1,0,1.9-0.9,1.9-1.9c0-0.8-0.6-1.4-1.7-2.3c-0.3-0.3-0.6-0.6-1-0.9c-0.2-0.2-0.5-0.5-0.8-0.7c-1.1-1-2.4-2.2-2.4-3.8c0-2.1,1.7-3.9,3.9-3.9c0.5,0,1,0.4,1,1s-0.4,1-1,1c-1.1,0-1.9,0.9-1.9,1.9c0,0.8,0.9,1.6,1.8,2.4c0.3,0.3,0.6,0.5,0.8,0.8c0.3,0.3,0.6,0.6,0.9,0.8c1.1,1,2.3,2.1,2.3,3.7C25,18.7,23.3,20.4,21.2,20.4z" />
<path d="M30.8,20.4c-0.5,0-1-0.4-1-1s0.4-1,1-1c1.1,0,1.9-0.9,1.9-1.9c0-0.8-0.6-1.4-1.7-2.3c-0.3-0.3-0.6-0.6-1-0.9c-0.2-0.2-0.5-0.5-0.8-0.7c-1.1-1-2.4-2.2-2.4-3.8C27,6.7,28.7,5,30.8,5c0.5,0,1,0.4,1,1s-0.4,1-1,1c-1.1,0-1.9,0.9-1.9,1.9c0,0.8,0.9,1.6,1.8,2.4c0.3,0.3,0.6,0.5,0.8,0.8c0.3,0.3,0.6,0.6,0.9,0.8c1.1,1,2.3,2.1,2.3,3.7C34.7,18.7,32.9,20.4,30.8,20.4z" />
<path d="M40.5,20.4c-0.5,0-1-0.4-1-1s0.4-1,1-1c1.1,0,1.9-0.9,1.9-1.9c0-0.8-0.6-1.4-1.7-2.3c-0.3-0.3-0.6-0.6-1-0.9c-0.2-0.2-0.5-0.5-0.8-0.7c-1.1-1-2.4-2.2-2.4-3.8c0-2.1,1.7-3.9,3.9-3.9c0.5,0,1,0.4,1,1s-0.4,1-1,1c-1.1,0-1.9,0.9-1.9,1.9c0,0.8,0.9,1.6,1.8,2.4c0.3,0.3,0.6,0.5,0.8,0.8c0.3,0.3,0.6,0.6,0.9,0.8c1.1,1,2.3,2.1,2.3,3.7C44.3,18.7,42.6,20.4,40.5,20.4z" />
</g>
)}
{name === 'search' && (
<g id="Search">
<path d="M27.8,45.7c-10.1,0-18.3-8.2-18.3-18.3S17.8,9.1,27.8,9.1s18.3,8.2,18.3,18.3S37.9,45.7,27.8,45.7z M27.8,11c-9,0-16.4,7.3-16.4,16.4s7.3,16.4,16.4,16.4s16.4-7.3,16.4-16.4S36.9,11,27.8,11z" />
<rect x="45" y="36" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -19.1196 46.7971)" width="3.9" height="21" />
</g>
)}
{name === 'news' && (
<g id="Latest_news">
<path d="M36.9,54.1C36.9,54.1,36.9,54.1,36.9,54.1c-0.5,0-0.9-0.3-0.9-0.8l-7.7-37.8l-5.8,28.2c-0.1,0.4-0.4,0.7-0.9,0.8c-0.4,0-0.8-0.2-1-0.6l-2.7-7.1H4.1c-0.5,0-1-0.4-1-1c0-0.5,0.4-1,1-1h14.5c0.4,0,0.8,0.2,0.9,0.6l1.7,4.6l6.1-29.5c0.1-0.4,0.5-0.8,0.9-0.8c0,0,0,0,0,0c0.5,0,0.9,0.3,0.9,0.8L37,49l5.7-21.1c0.1-0.4,0.5-0.7,0.9-0.7c0.4,0,0.8,0.2,0.9,0.6l2.7,7.1H60c0.5,0,1,0.4,1,1c0,0.5-0.4,1-1,1H46.5c-0.4,0-0.8-0.2-0.9-0.6l-1.8-4.9l-6,22.2C37.7,53.8,37.3,54.1,36.9,54.1z" />
</g>
)}
{name === 'hamburger' && (
<g id="Hamburger">
<path d="M31.8,58c-14.3,0-26-11.7-26-26s11.7-26,26-26s26,11.7,26,26S46.2,58,31.8,58z M31.8,7.9C18.5,7.9,7.7,18.7,7.7,32s10.8,24.1,24.1,24.1S55.9,45.3,55.9,32S45.1,7.9,31.8,7.9z" />
<path d="M45.3,23.3h-27c-0.5,0-1-0.4-1-1s0.4-1,1-1h27c0.5,0,1,0.4,1,1S45.8,23.3,45.3,23.3z" />
<path d="M45.3,32.9h-27c-0.5,0-1-0.4-1-1c0-0.5,0.4-1,1-1h27c0.5,0,1,0.4,1,1C46.3,32.5,45.8,32.9,45.3,32.9z" />
<path d="M45.3,42.6h-27c-0.5,0-1-0.4-1-1c0-0.5,0.4-1,1-1h27c0.5,0,1,0.4,1,1C46.3,42.1,45.8,42.6,45.3,42.6z" />
</g>
)}
{name === 'textsize' && (
<g id="Textsize">
<polyline className="st2" points="6,22.4 6,16.3 30.5,16.3 30.5,22.4 " />
<path className="st2" d="M18.2,44.8c0,2.3,1.8,4.1,4.1,4.1h-8.2C16.4,48.9,18.2,47.1,18.2,44.8V16.3" />
<path className="st2" d="M24.3,16.3" />
<path className="st2" d="M6,19.4c0-1.7,1.4-3.1,3.1-3.1" />
<path className="st2" d="M30.5,19.4c0-1.7-1.4-3.1-3.1-3.1" />
<polyline className="st2" points="38.6,32.6 38.6,26.5 59,26.5 59,32.6 " />
<path className="st2" d="M48.8,44.8c0,2.3,1.8,4.1,4.1,4.1h-8.2C47,48.9,48.8,47.1,48.8,44.8V26.5" />
<path className="st2" d="M52.9,26.5" />
<path className="st2" d="M38.6,29.6c0-1.7,1.4-3.1,3.1-3.1" />
<path className="st2" d="M59,29.6c0-1.7-1.4-3.1-3.1-3.1" />
</g>
)}
{name === 'text-to-speach' && (
<g id="Text-to-speech">
<path className="st2" d="M34.6,10c-0.4,0-0.8,0.1-1.1,0.4L17,24.1h-6.2c-1.5,0-2.6,1.2-2.6,2.6v10.6c0,1.5,1.2,2.6,2.6,2.6H17l16.5,13.7c0.3,0.2,0.7,0.4,1.1,0.4c1,0,1.8-0.8,1.8-1.8V11.8C36.4,10.8,35.6,10,34.6,10z" />
<path className="st2" d="M36.4,40.6c3.1-1.6,5.3-4.9,5.3-8.6s-2.1-7-5.3-8.6" />
<path className="st2" d="M48.9,47.2c4.2-3.7,6.8-9.1,6.8-15.2c0-6-2.6-11.4-6.8-15.1" />
<path className="st2" d="M43.9,42.2c2.9-2.4,4.8-6.1,4.8-10.2c0-4.1-1.9-7.7-4.8-10.1" />
</g>
)}
</svg>
)
// usage:
ReactDOM.render(<Icon name="textsize" />, document.getElementById('root'));svg {
width: 40px
}
.st2{
fill:none;
stroke:#000000;
stroke-width:2;
stroke-linecap:round;
stroke-linejoin:round;
stroke-miterlimit:10;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>