search

microsoft / fluentui

Fluent UI web represents a collection of utilities, React components, and web components for building web applications.
https://react.fluentui.dev
Other
18.52k stars 2.73k forks source link

Icons missing in Fabric Components despite initializeIcons #11694

Closed middiu closed 4 years ago

middiu commented 4 years ago

Hi All, I know what your are thinking: another boring issue on missing Icons... sorry but I need your help

Environment Information

I'm using Node v10.17.0.

This my package.json file:

"dependencies": {
    "@azure/cosmos": "^3.5.3",
    "@microsoft/sp-lodash-subset": "1.10.0",
    "@pnp/common": "2.0.0",
    "@pnp/graph": "2.0.0",
    "@pnp/logging": "2.0.0",
    "@pnp/nodejs": "2.0.0",
    "@pnp/odata": "2.0.0",
    "@pnp/sp": "2.0.0",
    "@types/camljs": "2.8.1",
    "@uifabric/file-type-icons": "^7.2.2",
    "@uifabric/icons": "^7.3.0",
    "camljs": "^2.12.0",
    "formik": "^2.1.1",
    "formik-office-ui-fabric-react": "^1.0.0",
    "office-ui-fabric-react": "^7.81.0",
    "yup": "^0.28.0"
  },
  "peerDependencies": {
    "prop-types": "15.7.2",
    "react": "16.8.5",
    "react-dom": "16.8.5"
  },
  "devDependencies": {
    "@babel/core": "^7.0.0",
    "@babel/runtime": "^7.0.0",
    "@svgr/rollup": "^2.4.1",
    "@types/jest": "24.0.25",
    "@types/react": "16.8.8",
    "@types/react-dom": "16.8.3",
    "cross-env": "6.0.3",
    "debug": "^4.1.1",
    "gh-pages": "2.2.0",
    "node-sass": "^4.13.0",
    "react": "16.8.5",
    "react-dom": "16.8.5",
    "react-scripts-ts": "3.1.0",
    "rollup": "1.29.0",
    "rollup-plugin-babel": "^4.0.1",
    "rollup-plugin-commonjs": "10.1.0",
    "rollup-plugin-node-resolve": "5.2.0",
    "rollup-plugin-peer-deps-external": "^2.2.0",
    "rollup-plugin-postcss": "2.0.3",
    "rollup-plugin-typescript2": "0.25.3",
    "rollup-plugin-url": "3.0.1",
    "typescript": "^3.7.2"
  }

I have a very simple React component I created just for this issue, and I do not see any of the icon I should see (DropDown list and Button)

import { initializeIcons } from 'office-ui-fabric-react/lib/Icons';
import {initializeFileTypeIcons} from '@uifabric/file-type-icons';

initializeIcons();
initializeFileTypeIcons();
export class IconTest extends Component < {}, {} > {

    render() {
        return (
            <div>
                <Button iconProps={{ iconName: 'Home' }} />
                <DatePicker label="Date Submitted" placeholder="Select a date..."
                      ariaLabel="Select a date" isRequired={true} />
            </div>
        );
    }
}

Actual behavior:

If I inspect the page what I notice is that there is no data inside the i tag, If I check the same element from the UIFabric component demo page I see a square... image

image

Everyone seems to resolve this issue calling initializeIcons() bat that doesn't work for me.

Also, in the browser console I do not see any error.

Any suggestion?

Expected behavior:

I should see the icons.

xugao commented 4 years ago

@middiu - if you check our example which is a working case here: image

could you tell me in your case, what font-family the icon element i is set to? also, do you see fabric fonts being downloaded from CDN?

xugao commented 4 years ago

And just to be sure - are you using fabric in SPFx?

middiu commented 4 years ago

1) No I'm not using SPFx at this stage, I'm developing a React module that exports a bunch of React components/forms. I'm testing this module with an app bootstrapped with create-react-app

2) the font is set to "Segoe UI", "Segoe UI Web (West European)", "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", sans-serif;" that I understand it wrong. image

3) No I do not see any font loaded from the CDN. Please see the Chrome Dev Tool Network tab: image

xugao commented 4 years ago

hmm, initializeIcons should add the font-family and src url to download the fonts from CDN. @Jahnp - do you have any idea here?

xugao commented 4 years ago

@middiu - In your network trace, you are downloading fabric.min.css which means you are using fabric-core somewhere. But it's not indicated in your code snippet. can you provide a more comprehensive repro, which ideally can both describe the code you wrote and the environment the code is running inside. This can enable us to help you further.

KevinTCoughlin commented 4 years ago

Hrmm, I thought this incompatibility with Fabric Core would be fixed with: https://github.com/OfficeDev/office-ui-fabric-react/pull/11524

Jahnp commented 4 years ago

@KevinTCoughlin , it's possible that it isn't related to Fabric Core—likely, in fact, since the DOM in the screenshots don't use ms-Icon at all. But there are enough variables at play that a more detailed repro environment (like a codepen/codesandbox) would help us determine what exactly is the issue here.

middiu commented 4 years ago

Hi Guys,

I fixed the issue re-organizing my dependencies. Now my package.json looks like this and everything works fine (icons, css etc etc).

Pretty much I moved all the microsoft fabric and sp dependencies to dev and peer, and everything works fine.

,
  "dependencies": {
    "@azure/cosmos": "^3.5.3",
    "@pnp/common": "2.0.0",
    "@pnp/graph": "2.0.0",
    "@pnp/logging": "2.0.0",
    "@pnp/nodejs": "2.0.0",
    "@pnp/odata": "2.0.0",
    "@pnp/sp": "2.0.0",
    "@types/camljs": "2.8.1",
    "camljs": "^2.12.0",
    "formik": "^2.1.1",
    "formik-office-ui-fabric-react": "^1.0.0",
    "uuid": "^3.3.3",
    "yup": "^0.28.0"
  },
  "peerDependencies": {
    "@microsoft/sp-core-library": "^1.10.0",
    "@microsoft/sp-lodash-subset": "1.10.0",
    "@microsoft/sp-office-ui-fabric-core": "^1.10.0",   
    "@uifabric/file-type-icons": "^7.2.2",
    "@uifabric/icons": "^7.3.0",
    "office-ui-fabric-react": "^7.81.0",
    "react-scripts": "2.1.0",
    "prop-types": "15.7.2",
    "react": "16.8.5",
    "react-dom": "16.8.5"
  },
  "devDependencies": {
    "@microsoft/sp-core-library": "^1.10.0",
    "@microsoft/sp-lodash-subset": "1.10.0",
    "@microsoft/sp-office-ui-fabric-core": "^1.10.0",
    "@uifabric/file-type-icons": "^7.2.2",
    "@uifabric/icons": "^7.3.0",
    "camljs": "^2.12.0",
    "office-ui-fabric-react": "^7.81.0",
    "react-scripts": "2.1.0",
    "prop-types": "15.7.2",
    "react": "16.8.5",
    "react-dom": "16.8.5",
    "@babel/core": "^7.0.0",
    "@babel/runtime": "^7.0.0",
    "@svgr/rollup": "^2.4.1",
    "@types/jest": "24.0.25",
    "@types/react": "16.8.8",
    "@types/react-dom": "16.8.3",
    "@uifabric/fluent-theme": "^7.1.4",
    "cross-env": "6.0.3",
    "debug": "^4.1.1",
    "gh-pages": "2.2.0",
    "node-sass": "^4.13.0",
    "rollup": "1.29.0",
    "rollup-plugin-babel": "4.3.3",
    "rollup-plugin-commonjs": "10.1.0",
    "rollup-plugin-node-resolve": "5.2.0",
    "rollup-plugin-peer-deps-external": "^2.2.0",
    "rollup-plugin-postcss": "2.0.3",
    "rollup-plugin-typescript2": "0.25.3",
    "rollup-plugin-url": "3.0.1",
    "typescript": "^3.7.2"
  },

I suspect that the issue was in the way that rollup bundle up my module....

xugao commented 4 years ago

hmmm weird. but glad you resolved @middiu. i will go ahead close this issue then