如何在react中显示导入的svg图标

Question

我已经导入了组件上的所有SVG图标，我想将该状态下的所有图标放入对象中但当我在地图上运行它时，它是字符串形式的。有人能告诉我如何在react中显示地图上的图标吗？

import Artist from './assets/artist.svg';
import DataAnalysis from './assets/data-analysis.svg';
import Idea from './assets/idea.svg';
import Megaphone from './assets/megaphone.svg';
import Secure from './assets/secure.svg';
import WebProg from './assets/web-programming.svg';
class Service extends Component {
constructor(props) {
super(props)
this.state = {
services: [
{icon: "WebProg", heading: "Web Development", descrip: "It is a long established fact that a reader will be distracted by the readable content of a page when looking"},
{icon: "DataAnalysis", heading: "Database Analysis", descrip: "It is a long established fact that a reader will be distracted by the readable content of a page when looking"},
{icon: "Secure", heading: "Server Security", descrip: "It is a long established fact that a reader will be distracted by the readable content of a page when looking"},
{icon: "Artist", heading: "UX/UI Strategy", descrip: "It is a long established fact that a reader will be distracted by the readable content of a page when looking"},
{icon: "Idea", heading: "Analysis For Tools", descrip: "It is a long established fact that a reader will be distracted by the readable content of a page when looking"},
{icon: "Megaphone", heading: "Marketing Strategy", descrip: "It is a long established fact that a reader will be distracted by the readable content of a page when looking"},
]
}
}
render() {
return (
<Element name="services" id="services" className="element" style={{position: `relative`, backgroundImage: `url(${IdeaBg})`}}>
<Container>
<h2 className="heading text-center">Our main <span>services</span></h2>
<Row>
{
this.state.services.map((serve, i)=>(
<Col lg="4">
{serve.icon}
<h3>{serve.heading}</h3>    
<p>{serve.descrip}</p>
</Col>
))
}
</Row>
</Container>
</Element>
)
}
}
export default Service;

Answer 1

这样试试：你不必改变你的渲染方法，你可以像使用React组件一样使用每个图标

请注意，在css中，您将能够访问每个图标的标签以及该图标内元素的所有类，就像访问任何子HTML元素一样，在我看来，这使得这些图标的样式更容易动态。

import React from 'react';
import {ReactComponent as Artist} from './assets/artist.svg';
import {ReactComponent as DataAnalysis} from './assets/data-analysis.svg';
import {ReactComponent as Idea} from './assets/idea.svg';
import {ReactComponent as Megaphone} from './assets/megaphone.svg';
import {ReactComponent as Secure} from './assets/secure.svg';
import {ReactComponent as WebProg} from './assets/web-programming.svg';
class Service extends React.Component {
constructor(props) {
super(props)
this.state = {
services: [
{icon: <WebProg />, heading: "Web Development", descrip: "It is a long established fact that a reader will be distracted by the readable content of a page when looking"},
{icon: <DataAnalysis />, heading: "Database Analysis", descrip: "It is a long established fact that a reader will be distracted by the readable content of a page when looking"},
{icon: <Secure />, heading: "Server Security", descrip: "It is a long established fact that a reader will be distracted by the readable content of a page when looking"},
{icon: <Artist />, heading: "UX/UI Strategy", descrip: "It is a long established fact that a reader will be distracted by the readable content of a page when looking"},
{icon: <Idea />, heading: "Analysis For Tools", descrip: "It is a long established fact that a reader will be distracted by the readable content of a page when looking"},
{icon: <Megaphone />, heading: "Marketing Strategy", descrip: "It is a long established fact that a reader will be distracted by the readable content of a page when looking"},
]
}
}
render() {
return (
<Element name="services" id="services" className="element" style={{position: `relative`, backgroundImage: `url(${IdeaBg})`}}>
<Container>
<h2 className="heading text-center">Our main <span>services</span></h2>
<Row>
{
this.state.services.map((serve, i)=>(
<Col lg="4">
{serve.icon}
<h3>{serve.heading}</h3>
<p>{serve.descrip}</p>
</Col>
))
}
</Row>
</Container>
</Element>
)
}
}
export default Service;

Answer 2

---

您可以通过在代码中进行小的更改来实现这一点

import React from 'react';
import Artist from './assets/artist.svg';
class App extends React.Component {
constructor() {
super();
this.state = {
services: [
{icon: Artist,
heading: "Web Development",
descrip: "some text "}}
]
}
}
render() {
return (
<div>
{
this.state.services.map((serve, i) => (
<span>
<img src={serve.icon} alt="icon" />
<h3>{serve.heading}</h3>
<p>{serve.descrip}</p>
</span>
))
}
</div>
);
}
}
export default App;

删除图标中的引号："WebProg">到图标：WebProg

使用img标签或任何其他方法导入图像文件以反应