错误：您可能需要适当的加载程序来处理此文件类型 - Fusion Js，使用图标

Question

I am writing my first application using Fusion Js and land up into a problem in using icons, for any Font-awesome icons or Material react icons, as soon as I add icons to my template it give me an error

''You may need an appropriate loader to handle this file type''

import React from 'react';
import {styled} from 'fusion-plugin-styletron-react';
import MaterialIcon, {colorPalette} from 'material-icons-react';

const TopBar = styled('div',{
    height:'30px',
    width: '100%',
    position:'fixed',
    top:'0',
    zIndex:'99',
    backgroundColor:'#4b4b4b',
    display:'flex',
   boxShadow:'0px 0px 8px 0px #000000'
});

const Brand = styled('div',{
    color:'#ffffff',

});

export default () => (
    <TopBar>
        <span></span>
        <Brand>
            <span> Observe Point</span>
        </Brand>
        <div>
            <span></span>
            <span><MaterialIcon icon={'search'}></MaterialIcon></span>
        </div>
    </TopBar>
);

What i know is that, this error usual occurs while bundling, but I am not sure how to fix this.

Need help.

Answer 1

Fusion.js at this time does not support custom webpack loaders. We do have some techniques to load SVGs though, and have documented a strategy here: https://fusionjs.com/docs/guides/svg-react-components

I'd love to find a way to be more compatible with material-ui though, so perhaps we can look at implementing a fusion-plugin-material-icons or similar in the future.