How do I render props for React Bootstrap Icons

Question

I am running into a slight problem when trying to render a React Bootstrap Icon in Next.js.

I am using getStaticProps to make a call to the Notion API, to then use as props in my page, and everything is working fine.

However, I would like to define which icon to use in the Notion CMS.

According to the React Bootstrap Icons package on NPM you can do it this way, however I am not using TypeScript so I edited the code slightly (further below):

Icons.js

import * as icons from 'react-bootstrap-icons';


export const Icon = ({ iconName, ...props }) => {
  const BootstrapIcon = icons[iconName];
  return <BootstrapIcon {...props} />;
}

Services.js

import React from 'react';
import Card from 'react-bootstrap/Card';
import CardGroup from 'react-bootstrap/CardGroup';
import { Icon }  from '../icons';


function Services({data}) {

const renderItems = data?.map((record) => {

// saving notion data as variables 

  let icon = record.properties.Icon.title[0].text.content
  let title = record.properties.Service.rich_text[0].plain_text
  let description = record.properties.Descrip.rich_text[0].text.content

  return <Card key={record.id}>
  <Icon
  iconName={icon}
  color="#96DBAE"
  size={96}
  />
    <Card.Body>
      <Card.Title>{title}</Card.Title>
      <Card.Text>{description}</Card.Text>
    </Card.Body>
  </Card>
  
      })


  return (
    <>
  
   
    <section >
    <CardGroup>

      {renderItems}
  
    </CardGroup>
  
    </section>
    </>
  );
}


export default Services;

I am running into this error. When I console.log(icon) it displays as a string, however when I pass the variable as a prop on the Icon, the error shows. If I type a regular string e.g iconName={"Globe"} everything works fine.

Any ideas how to solve this or where I might be going wrong? Any help is massively appreciated!

How do I render props for React Bootstrap Icons

0 Answers0