CODEWITHSUNDEEP
javascriptreactjssvg
fox
fox

Reputation: 181

Can't render Svg Component in React

I have a component like this that accepts array of object as props. the info array has key called icon which value is another component(SVG) Home, People, Bath, Size

   const info = [
    {

        value: 1,
        icon: Home
    },
    {

        value: 2,
        icon: People
    },
    {

        value: 10,
        icon: Size
    },
    {

        value: 1,
        icon: Bath
    },
]


<Info info={info} />

inside the Info component:

 info.map((item, i) => (
                        <>
                            <li className="inline-flex">
                               {item.icon}
                            </li>
                        </>
                ))

Now the problem is that I can't render the icon component, when I log it, it prints a function()

what should i do in order to print the icon component ?

Update:

this is how my svg Component looks like.

  import React, { StatelessComponent, SVGAttributes } from "react";
    
    export interface SvgrComponent extends StatelessComponent<SVGAttributes<SVGElement>> {}
    
    export const People: SvgrComponent = () => {
      return (
        <svg
          xmlns="http://www.w3.org/2000/svg"
          width="24"
          height="24"
          viewBox="0 0 24 24"
          focusable="false"
        >
          <path
            d="M21,15V13a1,1,0,0,0-1-1H19V6a3,3,0,0,0-6,0v.5a.5.5,0,0,0,1,0V6a2,2,0,0,1,4,0v6H4a1,1,0,0,0-1,1v2a5,5,0,0,0,2.17,4.12l-1,1a.48.48,0,0,0,0,.7.48.48,0,0,0,.7,0l1.24-1.23A5,5,0,0,0,8,20h8a5,5,0,0,0,1.91-.38l1.24,1.23a.49.49,0,0,0,.7-.7l-1-1A5,5,0,0,0,21,15Zm-2.9,3.39a3.74,3.74,0,0,1-1,.43A3.8,3.8,0,0,1,16,19H8a3.8,3.8,0,0,1-1.12-.18,3.74,3.74,0,0,1-1-.43A4,4,0,0,1,4,15V13H20v2A4,4,0,0,1,18.1,18.39Z"
            fill="currentColor"
          />
        </svg>
      );
    };

Upvotes: 0

Views: 370

Answers (4)

Sumit Chaturvedi
Sumit Chaturvedi

Reputation: 348

Try the following:

 info.map((item, i) => (
                        <>
                            <li className="inline-flex">
                               {item.icon()}
                            </li>
                        </>
                ))

Upvotes: 3

thehunterbat
thehunterbat

Reputation: 51

I would recommend embedding in an image. this is a simple code.

{
            info.map((item, i) => (
                <>
                    <li className="inline-flex">
                      <img src={item.icon} />
                    </li>
                </>
        ))}

Upvotes: 1

Arman Bimatov
Arman Bimatov

Reputation: 1829

I'd want to see more code posted since the following works:

import React from "react";
import "./style.css";

const Home = (
  <svg class="svg-icon" viewBox="0 0 20 20">
    <path d="M17.684,7.925l-5.131-0.67L10.329,2.57c-0.131-0.275-0.527-0.275-0.658,0L7.447,7.255l-5.131,0.67C2.014,7.964,1.892,8.333,2.113,8.54l3.76,3.568L4.924,17.21c-0.056,0.297,0.261,0.525,0.533,0.379L10,15.109l4.543,2.479c0.273,0.153,0.587-0.089,0.533-0.379l-0.949-5.103l3.76-3.568C18.108,8.333,17.986,7.964,17.684,7.925 M13.481,11.723c-0.089,0.083-0.129,0.205-0.105,0.324l0.848,4.547l-4.047-2.208c-0.055-0.03-0.116-0.045-0.176-0.045s-0.122,0.015-0.176,0.045l-4.047,2.208l0.847-4.547c0.023-0.119-0.016-0.241-0.105-0.324L3.162,8.54L7.74,7.941c0.124-0.016,0.229-0.093,0.282-0.203L10,3.568l1.978,4.17c0.053,0.11,0.158,0.187,0.282,0.203l4.578,0.598L13.481,11.723z" />
  </svg>
);

const People = (
  <svg class="svg-icon" viewBox="0 0 20 20">
    <path d="M17.684,7.925l-5.131-0.67L10.329,2.57c-0.131-0.275-0.527-0.275-0.658,0L7.447,7.255l-5.131,0.67C2.014,7.964,1.892,8.333,2.113,8.54l3.76,3.568L4.924,17.21c-0.056,0.297,0.261,0.525,0.533,0.379L10,15.109l4.543,2.479c0.273,0.153,0.587-0.089,0.533-0.379l-0.949-5.103l3.76-3.568C18.108,8.333,17.986,7.964,17.684,7.925 M13.481,11.723c-0.089,0.083-0.129,0.205-0.105,0.324l0.848,4.547l-4.047-2.208c-0.055-0.03-0.116-0.045-0.176-0.045s-0.122,0.015-0.176,0.045l-4.047,2.208l0.847-4.547c0.023-0.119-0.016-0.241-0.105-0.324L3.162,8.54L7.74,7.941c0.124-0.016,0.229-0.093,0.282-0.203L10,3.568l1.978,4.17c0.053,0.11,0.158,0.187,0.282,0.203l4.578,0.598L13.481,11.723z" />
  </svg>
);

const info = [
  {
    value: 1,
    icon: Home
  },
  {
    value: 2,
    icon: People
  }
];

const Info = ({ info }) => (
  <div>
    {info.map((item, i) => (
      <>
        <li className="inline-flex">{item.icon}</li>
      </>
    ))}
  </div>
);

export default function App() {
  return <Info info={info} />;
}

Upvotes: 1

Sarun UK
Sarun UK

Reputation: 6736

svg should set as source to the img

           {
                info.map((item, i) => (
                    <>
                        <li className="inline-flex">
                          <img src={item.icon} />
                        </li>
                    </>
            ))}

Upvotes: 2

Related Questions