argon-design-system-react icon indicating copy to clipboard operation
argon-design-system-react copied to clipboard
verified publisher icon creativetimofficial

Can't load icons

Open ghost opened this issue 5 years ago • 10 comments

Version

1.1.0

Reproduction link

https://github.com/sc4224/typescript-graphql

Operating System

Mac OSX Catalina

Device

iMac

Browser & Version

Chrome 83.0.4103.61

Steps to reproduce

  1. git clone the repo
  2. execute yarn
  3. execute yarn dev
  4. Go to http://localhost:3000
  5. Imported the scss and css files as instructed import 'argon-design-system-react/src/assets/vendor/nucleo/css/nucleo.css'; import 'argon-design-system-react/src/assets/vendor/font-awesome/css/font-awesome.min.css'; import 'argon-design-system-react/src/assets/scss/argon-design-system-react.scss';
  6. Open Sans font is loading, but Icons on the Input field are not loading.

What is expected?

Icons to load for valid and invalid Input fields

What is actually happening?

Icons are not loading, square box placeholder is showing up where the icon should be Screenshot 2020-05-24 at 7 10 37 PM

Solution

Additional comments

ghost avatar May 24 '20 11:05 ghost

Hello there, @sc4224

Please check our live docs here: https://demos.creative-tim.com/argon-design-system-react/#/documentation/quick-start

Best, Manu

einazare avatar May 26 '20 06:05 einazare

Hey @EINazare I've already checked the docs and followed the instructions as stated where I import the css files. It does not work though, what am I doing wrong?

ghost avatar May 26 '20 06:05 ghost

Hello again, @sc4224 ,

Have you also added the fonts inside the .html file?

Best, Manu

einazare avatar May 26 '20 07:05 einazare

@EINazare yes I've tried that, included the font in the html. Still does not work

ghost avatar May 26 '20 15:05 ghost

@EINazare have you tried to work this with the nextjs framework?

ghost avatar May 26 '20 16:05 ghost

Hello again, @sc4224 ,

Unfortunately, no, we haven't tried it with NextJS, from what we know, NextJS has other ways of importing CSS/SCSS, that might be the cause. We will investigate this and come back with a response. In the meantime, any insights are welcomed.

Best, Manu

einazare avatar May 27 '20 06:05 einazare

@EINazare the things i've tried so far was to install url loader and configure webpack through next.config.js. It does not seem to do the job for me. CSS and SCSS imports were done correctly through libraries next-sass, next-css and next-fonts. As you can see in the picture the styling was included, it was just the icon could not load.

ghost avatar May 27 '20 18:05 ghost

Hello again, @sc4224 ,

I am sorry, but at the moment, we've only worked with NextJS and our material products: https://www.creative-tim.com/templates/nextjs Also, if you check our unaltered products: https://www.creative-tim.com/product/argon-design-system-react You will see that it works without any issues. We are sorry, but we cannot help you further.

I will leave this issue open, and maybe someone from our community will come to your help.

Best, Manu

einazare avatar May 28 '20 10:05 einazare

Fixed the issue by downgrading the react-script version to 3.4.4. Solution found from here: https://github.com/facebook/create-react-app/issues/9992

yassinetb avatar Feb 06 '21 15:02 yassinetb

Hello there guys,

I think for font, you could use the following: https://www.npmjs.com/package/next-fonts

Best, Manu

einazare avatar Feb 08 '21 07:02 einazare