ui5-webcomponents-react: Icon component not working

Icon component doesn’t display.

I have the following:

import React from "react";
import "./Content.css";
import { Card } from "@ui5/webcomponents-react/lib/Card";
import "@ui5/webcomponents-icons/dist/icons/lightbulb";
import { Icon } from "@ui5/webcomponents-react/lib/Icon";

function Content() {
  return (
    <div className="content">
      <Card className="card small-card" heading="Lights">
        <Icon src="sap-icons://lightbulb" />
      </Card>
    </div>
  );
}

export default Content;

No Icon is displayed, just a lot of console warnings like Required icon is not imported. You have to import the icon as a module in order to use it e.g. "@ui5/webcomponents/dist/icons/add.js"

I’ve also tried <Icon name="lightbulb" /> - neither work.

About this issue

Original URL
State: closed
Created 4 years ago
Comments: 15 (7 by maintainers)

Most upvoted comments

Hi @i-pip

Can you try to install the exact version using "@ui5/webcomponents-react": "0.7.0-rc.8", (without the ^) and update the charts-library to that version as well?

As an alternative you could also add a resolution like:

"resolutions": {
     "@ui5/webcomponents-react": "0.7.0-rc.8",
     "@ui5/webcomponents-react-charts": "0.7.0-rc.8",
}

This exact-version thing should be a temporary thing as I made a bad release of the 0.7.0-rcX versions which is leading to that inconsistent resolution. We’ll try to do the stable 0.7.0 this week.

MarcusNotheis on Jan 16, 2020

Can you try this one: import '@ui5/webcomponents-icons/dist/json-imports/Icons.js';

MarcusNotheis on Feb 11, 2020

This works! 🎉 Thank you @MarcusNotheis.

A quick note - I had to yarn add @ui5/webcomponents-react-base@0.7.0-rc.8 because it was throwing Uncaught Error: Cannot find module '@ui5/webcomponents-react-base/lib/usePassThroughHtmlProps' at webpackMissingModule - so I guess that dep will need updating too before you release stable 0.7.0.

Thanks again for the quick responses - I will close this issue now.

i-pip on Jan 16, 2020