SVG icons are not Loading with webpack

[zeshanshani]

Version

3.2.0

Development Environment

Chrome, Mac 10.13.4

Current Behavior

When importing with Webpack, the SVG icons are not loading because they are pointing to the current page whereas the icons are located inside the node_modules package (screenshot: https://s.zeshanahmed.com/a_2109F674.png).

And I am unable to set the path for the SVG icons either. Checked the documentation, read the code, but can't find any hint.

Here's my code:

var ImageEditor = require( 'tui-image-editor' );
// var blackTheme = require( './js/theme/black-theme.js' );

jQuery(document).ready(function($) {
  const $images = $('.images'),
        $image  = $('.image');

  $image.each((index, el) => {
    console.log( index, $(el) );

    const $el     = $( el );
    const $elImg  = $el.find( 'img' );
    const $edit   = $el.find( '.image__action--edit' );
    const $delete = $el.find( '.image__action--delete' );
    const $upload = $el.find( '.image__upload' );

    $edit.on('click', e => {
      e.preventDefault();

      var instance = new ImageEditor( document.querySelector( '#image-editor-container' ), {
        includeUI: {
          loadImage: {
            path: $el.data( 'image' ),
            name: 'SampleImage'
          },
          // theme: blackTheme, // or whiteTheme
          initMenu: 'filter',
          menuBarPosition: 'bottom'
        },
        cssMaxWidth: 700,
        cssMaxHeight: 500,
        selectionStyle: {
          cornerSize: 20,
          rotatingPointOffset: 70
        }
      });
    });
  });
});

Expected Behavior

I need to find how I can pass a custom path for the SVG icons URLs.

[zeshanshani]

Sorry! It's fixed. It was part of the blackTheme.js file: https://raw.githubusercontent.com/nhnent/tui.image-editor/b281db211e247fba537d00312dc2a3513e1541bc/examples/js/theme/black-theme.js

It'd be great if this can be included in the documentation. Your plugin is awesome!

[gamcoh]

I have the same problem but i didn't understand how you manage to fix it with the blackTheme file, could you help me @zeshanshani ?

[gamcoh]

Never mind i imported the files and put them in the conf of the theme file like so:

const icona = require('tui-image-editor/dist/svg/icon-a.svg')
const iconb = require('tui-image-editor/dist/svg/icon-b.svg')
const iconc = require('tui-image-editor/dist/svg/icon-c.svg')
const icond = require('tui-image-editor/dist/svg/icon-d.svg')
const bg = require('tui-image-editor/examples/img/bg.png')
...
'menu.normalIcon.path': icond,

[arifhussain353]

@gamcoh Thanks, man!

[KunalBurangi]

Hey i am unable to solve this issue and also unable to understand the above comments can someone please help me on where to write this code ?