Блог

Я импортировал все значки 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;

  

Попробуйте это так: вам не нужно будет вносить изменения в свой метод рендеринга, и вы сможете использовать каждый значок так, как используете компонент 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;
  

вы можете добиться этого, внеся небольшие изменения в свой код

 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 или любой другой метод для импорта файлов изображений в react