Как использовать курсор из пользовательского файла PNG в Webpack / React?

Question

У меня есть приложение webpack / реагировать. Я пытаюсь использовать пользовательский курсор на div. Я пробовал все комбинации из следующих:

require('../resources/down-arrow.png');
// also tried: import DownArrow from '../resources/down-arrow.png';

...
const style = {cursor: `url(${DownArrow})`};
// also tried const style = {cursor: `url(down-arrow.png`)};
return (
   <div style={style}>
       click here to download...
   </div>
);

Мои webpack.config.js правила следующие:

    rules: [
        {
            test: /\.jsx?$/,
            include: path.resolve(__dirname, 'src/'),
            use: 'babel-loader'
        },{
            test: /\.css$/,
            loader: ['style-loader', 'css-loader']
        },{
            test: /\.(png|jpg|jpeg|gif|woff)$/,
            loader: 'url-loader?limit=9999&name=[path][name].[ext]'
        },{
            test: /\.README$/, loader: 'null'
        },{
            test: /.*data\/.*\.zip/,
            loader: 'file-loader'
        },
    ]

Когда я пытаюсь console.log('style is ', style), это то, что я см:

style is {cursor: "url(data:image/png;base64,iVBORw0KGgoAA...