Icons don't showing

[sambaer]

Version

"@toast-ui/react-image-editor": "^1.0.1"

Test Environment

Chrome, macOS Mojave

Current Behavior

Icons don't showing

import 'tui-image-editor/dist/tui-image-editor.css';
import ImageEditor from '@toast-ui/react-image-editor';
                      <ImageEditor
                            includeUI={{
                            loadImage: {
                              path: ""
                              name: 'SampleImage',
                            },
                            menu: ['shape', 'filter'],
                            initMenu: 'filter',
                            uiSize: {
                              width: '1000px',
                              height: '700px',
                            },
                            menuBarPosition: 'bottom',
                          }}
                          cssMaxHeight={500}
                          cssMaxWidth={700}
                          selectionStyle={{
                            cornerSize: 20,
                            rotatingPointOffset: 70,
                          }}
                          usageStatistics
                        />

[Cody0913]

Not sure if related, but I think this might be the cause. Cannot GET /icon-b.svg It looks like it is trying to request the SVG's from wherever you are using the wrapper. I think a quick workaround would be to copy the svg files from vanilla lib and move them into your public/web folder to be accessible. Not seeing a way to replace icons to be able to work around this issue. Will dig deeper and relay back here if I find anything.

[Cody0913]

I think I found out how to replace the icons. You need to supply the icon location in your theme object. http://nhn.github.io/tui.image-editor/latest/themeConfig

[Cody0913]

I'll also leave a sidenote as not sure if intended or not. Once I did get the icons to render and not throw 404 errors (I ended up using webpack file-loader to load in the svgs from the vanilla src) I had to modify the theme object a bit to import the icons for reference as following the documentation from the example I referenced above had some issues with the different states (normal/active/hover). I ended up removing the submenu.normalIcon.path/menu.normalIcon.path options and am now just setting the names.

I am personally using BluePrint for my React components and so modified the themeObject to use their colors, but here is the themeObject I used.

/*/ <reference path="./theme.d.ts" />*/
import { Colors } from '@blueprintjs/core';
import 'tui-image-editor/dist/svg/icon-a.svg';
import 'tui-image-editor/dist/svg/icon-b.svg';
import 'tui-image-editor/dist/svg/icon-c.svg';
import 'tui-image-editor/dist/svg/icon-d.svg';

// default keys and styles
export const theme = {
  'common.backgroundColor': Colors.DARK_GRAY1,
  'common.backgroundImage': 'none',
  'common.bi.image': '/pathTo/MyLogo.svg',
  'common.bisize.height': '42px',
  'common.bisize.width': '200px',
  'common.border': '0px',

// header
  'header.backgroundColor': 'transparent',
  'header.backgroundImage': 'none',
  'header.border': '0px',

// load button
  'loadButton.backgroundColor': Colors.WHITE,
  'loadButton.border': `1px solid ${Colors.LIGHT_GRAY2}`,
  'loadButton.color': '#222',
  'loadButton.fontFamily': 'NotoSans, sans-serif',
  'loadButton.fontSize': '12px',

// download button
  'downloadButton.backgroundColor': Colors.BLUE3,
  'downloadButton.border': `1px solid ${Colors.BLUE3}`,
  'downloadButton.color': Colors.WHITE,
  'downloadButton.fontFamily': 'NotoSans, sans-serif',
  'downloadButton.fontSize': '12px',

// main icons
  'menu.iconSize.height': '24px',
  'menu.iconSize.width': '24px',
  'menu.normalIcon.name': 'icon-d',

// submenu primary color
  'submenu.backgroundColor': Colors.DARK_GRAY1,
  'submenu.partition.color': Colors.GRAY3,

// submenu icons
  'submenu.activeIcon.name': 'icon-c',
  'submenu.iconSize.height': '32px',
  'submenu.iconSize.width': '32px',
  'submenu.normalIcon.name': 'icon-d',

// submenu labels
  'submenu.activeLabel.color': Colors.WHITE,
  'submenu.activeLabel.fontWeight': 'lighter',
  'submenu.normalLabel.color': Colors.GRAY4,
  'submenu.normalLabel.fontWeight': 'lighter',

// checkbox style
  'checkbox.backgroundColor': Colors.WHITE,
  'checkbox.border': `1px solid ${Colors.LIGHT_GRAY2}`,

// rango style
  'range.bar.color': Colors.DARK_GRAY5,
  'range.pointer.color': Colors.WHITE,
  'range.subbar.color': Colors.GRAY5,
  'range.title.color': Colors.WHITE,
  'range.title.fontWeight': 'lighter',
  'range.value.backgroundColor': Colors.DARK_GRAY1,
  'range.value.border': `1px solid ${Colors.DARK_GRAY2}`,
  'range.value.color': Colors.WHITE,
  'range.value.fontSize': '11px',
  'range.value.fontWeight': 'lighter',

// colorpicker style
  'colorpicker.button.border': `1px solid ${Colors.DARK_GRAY1}`,
  'colorpicker.title.color': Colors.WHITE,
};