search

fontIconPicker / react-fonticonpicker

React FontIconPicker Component to pick icon or SVG from a selection.
https://fonticonpicker.github.io/react-fonticonpicker/
MIT License
31 stars 32 forks source link

Webpack help #9

Open gregbia opened 5 years ago

gregbia commented 5 years ago

Could support for configuring webpack to work with fonticonpicker please be added? It is almost impossible to use this in a React app that has more going on. I have tried using every loader in webpack and seeking help, but keep getting a new error every time because it is importing css which also includes @font-face into React components..

gregbia commented 5 years ago

This is the webpack that I am working with https://codepen.io/anon/pen/romzbj

davidgolden commented 5 years ago

Can you expand on what the error is? I was able to get it working using require instead of import. Maybe not the best solution but it works.

require("@fonticonpicker/react-fonticonpicker/dist/fonticonpicker.base-theme.react.css"); require("@fonticonpicker/react-fonticonpicker/dist/fonticonpicker.material-theme.react.css");

swashata commented 5 years ago

You basically need file-loader to handle the font files.

{
    test: /\.(woff|woff2|eot|ttf|otf|png|jpg|gif)(\?v=\d+\.\d+\.\d+)?$/,
    use: [
        {
            // With file loader which copies file
            // and brings in URL to the file
            loader: 'file-loader',
            options: {
                name: '[name]-[hash:6].[ext]',
                outputPath: 'assets/',
            },
        },
    ],
},

In your webpack module.rules.