Need help for icon

[antonzhelyazkov]

Hello,

I need help to show icon. This is my code

import { Sidebar, Menu, MenuItem, SubMenu } from 'react-pro-sidebar';
import React from 'react';

export const Dashboard = () => {
    const [collapsed, setCollapsed] = React.useState(false);
    return (
        <div style={{ display: 'flex', height: '100%' }}>
        <Sidebar>
          <Menu>
            <MenuItem icon={<Icon name="book-2" />}>Documentation</MenuItem>
            <MenuItem icon={<Icon name="calendar" />}> Calendar</MenuItem>
            <MenuItem icon={<Icon name="shopping-cart" />}> E-commerce</MenuItem>
            <MenuItem icon={<Icon name="service" />}> Examples</MenuItem>
          </Menu>
        </Sidebar>
      </div>
    );
};

And I have got an error Line 11:30: 'Icon' is not defined react/jsx-no-undef

Can you help me to solve this issue and show icon

[HarikalarKutusu]

Where is "Icon" defined (imported)?

[antonzhelyazkov]

I tried with: import { Sidebar, Menu, MenuItem, SubMenu, Icon } from 'react-pro-sidebar';

but also fails

[HarikalarKutusu]

AFAIK, react-pro-sidebar does not have an <Icon /> object. It seems you copy pasted the code, that Icon is a placeholder for whatever icon library you use. react-pro-sidebar is usually integrated with MUI, so MUI Icons should work fine.

E.g. for Calendar icon here: https://mui.com/material-ui/material-icons/?query=calendar

...
import CalendarMonthIcon from '@mui/icons-material/CalendarMonth';
...
<MenuItem icon={<CalendarMonthIcon />}> Calendar</MenuItem>
...

Here is a blog entry you might like to read: https://blog.openreplay.com/simple-sidebars-with-react-pro-sidebar-and-material-ui/

Near the middle, there is a section about MaterialUI Icons usage...

Hope this helps...

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.