insin / react-octicon

A GitHub Octicons icon React component
https://insin.github.io/react-octicon/
Other
75 stars 8 forks source link

Octoicons not loaded #4

Open alexbeletsky opened 8 years ago

alexbeletsky commented 8 years ago

I installed the library and configured webpack according to documentation. But if I try to use the icon, what I see is,

screenshot 2016-10-12 16 23 44

The code,

        <td>
          <Octicon name="triangle-down" />
          <Octicon name="triangle-up" />
        </td>

Webpack.js

  module: {
    loaders: [ {
      test: /\.js$/,
      loaders: [ 'babel' ],
      exclude: /node_modules/
    }, {
      test: /\.(css|scss)$/,
      loader: 'style!css?sourceMap!sass?sourceMap'
    }, {
      test: /\.(png|jpg|gif)$/,
      loader: 'file-loader?name=images/[name].[ext]'
    }, {
      test: /\.(otf|eot|svg|ttf|woff|woff2).*$/,
      loader: 'url?limit=8192'
    } ]
  },

I tried both,

import 'octicons/octicons/octicons.css';

And in scss

@import 'octicons/octicons/octicons.css';

Nothing helps.

I don't understand how your library is actually loading octicons styles. Neither lib or demo app loads it. How should it work?

HoneyryderChuck commented 7 years ago

+1 here, finding the same issue with Webpack 2.

HoneyryderChuck commented 7 years ago

I'm suspecting it has something to do with CORS. I'm seeing the woff file being requested, but I see the redirection error page, which means that it couldn't reach it. I'm also setting a public path to the assets (/assets), and that's not to be seen in the woff url.

afkatja commented 6 years ago

@alexbeletsky note that in Webpack 2, you need to explicitly state the -loader suffix, like so:

{
      test: /\.(otf|eot|svg|ttf|woff|woff2).*$/,
      loader: 'url-loader?limit=8192'
    }