How to use these icons from node_modules?

[matsad3547]

I grabbed these icons via the npm package and installed it with $ yarn add simple-line-icons as usual. I've used these on an existing project at work, but I don't know how to use them here. I've got them attached as a classname in my react components like this:

<span className="icon-settings"></span>

I also added this to my CSS file:

@simple-line-font-path: "../node_modules/simple-line-icons/fonts";
@simple-line-font-family: "desired-name-font-family";
@simple-line-icon-prefix: prefix-;

which was the most useful thing I could guess from the docs. The project is based on 'create-react-app' so its nothing terribly fancy. I'm not getting any errors in the console, but nothing is showing up. Any help would be great!

[ruimserrano]

Hi,

I'm using sass in an angular app

on my /app/style/_icons.scss file:

$simple-line-font-path : "../../node_modules/simple-line-icons/fonts/";
@import '../../node_modules/simple-line-icons/scss/simple-line-icons';

.my-icon--edit{
    @extend .icon-pencil;
}

and works! Hope my case helps

[zivoradmilekic]

Try:

$simple-line-font-path: "~simple-line-icons/fonts/";
@import "~simple-line-icons/scss/simple-line-icons";

Instead of:

$simple-line-font-path : "../../node_modules/simple-line-icons/fonts/";
@import '../../node_modules/simple-line-icons/scss/simple-line-icons';

[typhoon2099]

I'm having trouble with this. I've got the following in my css:

$simple-line-font-path: "~simple-line-icons/fonts/";
@import "~simple-line-icons/css/simple-line-icons";

But it's not working, I keep receiving the following error:

ERROR in ./node_modules/css-loader!./node_modules/postcss-loader/lib!./node_modules/sass-loader/lib/loader.js!.
/sass/app.scss
    Module not found: Error: Can't resolve '../fonts/Simple-Line-Icons.woff?v=2.2.2' in '/var/www/sa
ss'

I can't see where I'm going wrong, I have Font Awesome being imported in the exact same way and it works fine.

EDIT: I'm an idiot, I was pointing to the css directory, not the scss directory...

[DaveOdden]

does this work for you when testing a production build?

[zoopyserg]

Oh my GOOOOOOOD you guys.

I've had the very same problem the author described. And adding this to my app/javascript/stylesheets/application.scss helped:

$simple-line-font-path: "~simple-line-icons/fonts/";
@import "~simple-line-icons/scss/simple-line-icons";

[zoopyserg]

I published a StackOverflow topic to try and promote the idea that the process of integration of lesser known fonts should be simplified.

https://stackoverflow.com/questions/67586585/who-turned-rails-font-integration-in-absolute-mess-nowadays

Please support.