Icon component not working

[i-pip]

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.

[MarcusNotheis]

Hi @i-pip
thanks for submitting this issue.
I guess this is a combination of a couple of issues.

1. The warning printed to the console in incorrect. I have opened a PR for the ui5-webcomponents to fix that (fix(Icon): Update warning to show correct path ui5-webcomponents#1140)
2. Which version of the @ui5/webcomponents-react react are you using? can you try to use 0.7.0-rc.8?

[i-pip]

Hi @MarcusNotheis

Thanks for the quick response. I was using @ui5/webcomponents-react 0.6.2. I updated to 0.7.0-rc.8 but the issue persists.

My dependencies currently look like so:

"dependencies": {
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.3.2",
    "@testing-library/user-event": "^7.1.2",
    "@ui5/webcomponents": "^1.0.0-rc.5",
    "@ui5/webcomponents-icons": "^1.0.0-rc.5",
    "@ui5/webcomponents-react": "^0.7.0-rc.8",
    "@ui5/webcomponents-react-charts": "^0.6.2",
    "react": "^16.12.0",
    "react-dom": "^16.12.0",
    "react-router-dom": "^5.1.2",
    "react-scripts": "3.3.0"
  },

I also made sure I deleted node_modules and yarn.lock before running yarn to update dependencies but nothing has changed

[MarcusNotheis]

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.

[i-pip]

This works! 🎉 Thank you @MarcusNotheis.

A quick note - I had to yarn add @ui5/[email protected] 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.

[ghewadesumit]

Icon doesn't work for me

import React from 'react';
import '@ui5/webcomponents/dist/Icon';
import '@ui5/webcomponents/dist/Button';

function Content() {
  return (
    <div className="content">
             <ui5-button icon="action-settings" aria-labelledby="lblSettings"></ui5-button>
    </div>
)
}

I'm not getting any error message in the console.

"devDependencies":{
 "@ui5/webcomponents": "1.0.0-rc.5",
    "@ui5/webcomponents-fiori": "1.0.0-rc.5",
    "@ui5/webcomponents-react": "0.8.3",
    "@ui5/webcomponents-icons": "1.0.0-rc.5",
    "@webcomponents/webcomponentsjs": "2.4.1"
}

[MarcusNotheis]

I @ghewadesumit, you have to import the icon you want to render:
import "@ui5/webcomponents-icons/dist/icons/action-settings";, to the pattern is always import "@ui5/webcomponents-icons/dist/icons/__ICON_NAME__";

Documentation

There should be also a warning in the console that you don't have imported the Icon you are using.
You can also import all icons using import '@ui5/webcomponents-icons/dist/Assets.js';

[ghewadesumit]

Hi @MarcusNotheis, Thanks for the reply. I tried importing the import "@ui5/webcomponents-icons/dist/icons/action-settings"; but its not helping. Moreover, to import all the icons the import you have suggested is not available import '@ui5/webcomponents-icons/dist/Assets.js'; instead it has this

[MarcusNotheis]

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

[ghewadesumit]

Tried import '@ui5/webcomponents-icons/dist/json-imports/Icons.js'; but still not working

[MarcusNotheis]

Is there anything logged into the console? Is there any minimal reproducible example you could share?

[ghewadesumit]

This was mentioned in the warning section Skipping definition of tag ui5-icon, because it was already defined by another instance of ui5-webcomponents.
And this is the icon button getting generated.

[MarcusNotheis]

That sounds like you have incompatible dependencies in your project. Can you run these commands and share the results with me:

npm ls @ui5/webcomponents
npm ls @ui5/webcomponents-base
npm ls @ui5/webcomponents-react
npm ls @ui5/webcomponents-react-base

[ghewadesumit]

I checked all my components are updated.

"@ui5/webcomponents": "1.0.0-rc.5",
    "@ui5/webcomponents-base": "0.18.0",
    "@ui5/webcomponents-fiori": "1.0.0-rc.5",
    "@ui5/webcomponents-react": "0.8.3",
    "@ui5/webcomponents-react-base": "0.8.3",
    "@ui5/webcomponents-icons": "1.0.0-rc.5",
    "@webcomponents/webcomponentsjs": "2.4.1"

and there is also one more warning

Message bundle assets are not configured. Falling back to english texts.  You need to import @ui5/webcomponents/dist/json-imports/i18n.js with a build tool that supports JSON imports.

As the warning suggests to use import '@ui5/webcomponents/dist/json-imports/i18n.js' , I also tried using that but again same result.

[MarcusNotheis]

What is the setup you are using? create-react-app?
I tried to build a CodeSandBox based on your input, but for me it looks fine:
https://codesandbox.io/s/ui5-webcomponents-sdm1g

cc @vladitasev @ilhan007 any ideas?

EDIT: Issue is resolved, conflicting dependencies

[ghewadesumit]

The error that i faced was, I was having the "@ui5/webcomponents": "1.0.0-rc.5" declared twice and that was causing dependency clash. Thank you @MarcusNotheis for assisting me with the issue.