CODEWITHSUNDEEP
reactjssvg
Ali Asger
Ali Asger

Reputation: 3

How to show imported svg icon in react?

I have imported all the SVG icons on a component and I want to put all the icons in the state into objects But when I run it on the map, it comes in string form. Can someone tell how to show icons on the map in 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;

Upvotes: 0

Views: 159

Answers (2)

Roaa
Roaa

Reputation: 1440

Try it like this: You won't have to make changes in your render method and you'll be able to use each icon as you use a React component

Note that, in your css, you will be able to access the tag of each icon and all the classes of the elements inside that icon just like you access any child HTML element which in my opinion makes making the style of those icons dynamic more easily.

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;

Upvotes: 1

Arun surendharan
Arun surendharan

Reputation: 61

you can achieve this by making small changes in your code

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;

remove quotes from icon:"WebProg" to icon:WebProg

use img tag or any other method to import image files to react

Upvotes: 0

Related Questions