icons8/line-awesome

Unable to import/use with Webpack

Closed this issue · 7 comments

Hi, I've been trying to use this amazing icon font variation in a Vue project using Webpack, but nothing worked form me, first it shows a lot of problems with font formats like woff or woff2, after adding support to in the rules it just import like a strange text font (maybe like algerian):

My Webpack test:

           {
                test: /\.(ttf|woff|woff2|eot|svg|gif|png|jpg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
                use: [{
                    loader: 'file-loader'
                }]
            }

My import look like this in an scss file:
@import '~line-awesome/dist/line-awesome/css/line-awesome.min.css';

Hello @jonalxh! Did you use NPM package or just sources?

Hi, I use NPM package.

Then you don't need to configure anything. Just import 'line-awesome/dist/line-awesome/css/line-awesome.min.css' and use icons :)
If you prefer scss, you can import it instead.
Please let me know if you succeed or not

No, it doesn't work, it says cannot load modules or files from css, I think the main problem is with woff2 and woff, but with the webpack config the font crashes.

Hi! Sorry for being late. Can you reproduce the problem on https://codesandbox.io/?

In my index.js I import line-awesome like this:

import 'line-awesome/dist/line-awesome/css/line-awesome.min.css'
Then I execute npm run webpack (because I need to use it) and it says:

Module parse failed: Unexpected character '' (1:4)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders

Due this I did what I wrote in the fist comment and it doesn't allow me to continue.

I'll try to do it in codesandbox o jsfiddle this weekend.

Please, reopen the issue, if you manage to reproduce somewhere :)