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

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

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;

从“/assets/Artist.svg”导入艺术家；
从“/assets/data analysis.svg”导入数据分析；
从“/assets/Idea.svg”导入Idea；
从“/assets/Megaphone.svg”导入扩音器；
从“/assets/Secure.svg”导入安全；
从“/assets/web programming.svg”导入WebProg；
类服务扩展组件{
建造师（道具）{
超级（道具）
此.state={
服务：[
{icon:“WebProg”，标题：“Web开发”，描述：“读者在浏览网页时会被可读内容分散注意力，这是一个早已确定的事实”}，
{icon:“DataAnalysis”，标题：“Database Analysis”，descripp:“读者在查看页面时会被可读内容分散注意力，这是一个早已确定的事实”}，
{icon:“Secure”，标题：“Server Security”，descripp:“读者在查看页面时会被页面的可读内容分散注意力，这是一个由来已久的事实”}，
{图标：“艺术家”，标题：“用户体验/用户界面策略”，描述：“读者在浏览网页时会被可读内容分散注意力，这是一个由来已久的事实”}，
{icon:“Idea”，标题：“工具分析”，descripp:“读者在阅读时会被页面的可读内容分散注意力，这是一个早已确定的事实”}，
{图标：“扩音器”，标题：“营销策略”，描述：“读者在浏览网页时会被可读内容分散注意力，这是一个早已确定的事实”}，
]
}
}
render（）{
返回(
我们的主要服务
{
this.state.services.map（（service，i）=>(
{serve.icon}
{serve.heading}
{serve.descripp}

))
}
)
}
}
导出默认服务；

---

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

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;

从“React”导入React；
从“/assets/Artist.svg”导入艺术家；
类应用程序扩展了React.Component{
构造函数（）{
超级（）；
此.state={
服务：[
{图标：艺术家，
标题：“网络开发”，
descripp:“一些文本”}
]
}
}
render（）{
返回(
{
this.state.services.map（（service，i）=>(
{serve.heading}
{serve.descripp}

))
}
);
}
}
导出默认应用程序；

从图标：“WebProg”到图标：WebProg

使用img标记或任何导入图像文件以作出反应

尝试如下操作： 您不必在渲染方法中进行更改，并且可以在使用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;

从“React”导入React；
从“./assets/Artist.svg”导入{ReactComponent as Artist}；
从“./assets/data analysis.svg”导入{ReactComponent as DataAnalysis}；
从“./assets/Idea.svg”导入{ReactComponent as Idea}；
从“./assets/Megaphone.svg”导入{ReactComponent as Megaphone}；
从“./assets/Secure.svg”导入{ReactComponent as Secure}；
从“./assets/web programming.svg”导入{ReactComponent as WebProg}；
类服务扩展了React.Component{
建造师（道具）{
超级（道具）
此.state={
服务：[
{icon:，标题：“Web开发”，descrip:“读者在浏览网页时会被可读内容分散注意力，这是一个早已确定的事实”，
{icon:，标题：“数据库分析”，descrip:“读者在查看页面时会被可读内容分散注意力，这是一个早已确定的事实”，
{icon:，标题：“服务器安全”，descrip:“读者在查看页面时会被页面的可读内容分散注意力，这是一个由来已久的事实”，
{icon:，标题：“UX/UI策略”，descripp:“读者在查看页面时会被可读内容分散注意力，这是一个早已确定的事实”，
{icon:，标题：“工具分析”，descrip:“读者在查看页面时会被可读内容分散注意力，这是一个早已确定的事实”，
{icon:，标题：“营销策略”，descrip:“读者在浏览网页时会被可读内容分散注意力，这是一个由来已久的事实”，
]
}
}
render（）{
返回(
我们的主要服务
{
this.state.services.map（（service，i）=>(
{serve.icon}
{serve.heading}
{serve.descripp}

))
}
)
}
}
导出默认服务；