Svg icon not showing in toast-ui vue image editor

Arif Hussain

I am using vue-cliand toast-ui-vue-image-editor.

// vue.config.js
const path = require('path')
let HardSourceWebpackPlugin = require('hard-source-webpack-plugin')

module.exports = {

  chainWebpack: config => {
    config.module
      .rule('svg')
      .use('file-loader')
      .options({
        name: '[name].[ext]',
        outputPath: ''
      })
  }

And added these line in Vue compoenent

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'
import { ImageEditor } from '@toast-ui/vue-image-editor'

Everything is working but editor's tool Svg icon is not showing. See most bottom section of editor where white square showing instead of icons (undo ,redo, crop etc.)

naveenkumar

I give my answer to this hoping this will help someone in the future.

I too faced this issue and solved issue with answer from this link

Here is my script section!

import 'tui-image-editor/dist/tui-image-editor.css'
import ImageEditor from '@toast-ui/vue-image-editor/src/ImageEditor.vue'
export default {
  name: 'ToastUI',
  components: {
    'image-editor': ImageEditor
  },
  data () {
    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')
    var whiteTheme = {
      'menu.normalIcon.path': icond,
      'menu.activeIcon.path': iconb,
      'menu.disabledIcon.path': icona,
      'menu.hoverIcon.path': iconc,
      'submenu.normalIcon.path': icond,
      'submenu.activeIcon.path': iconb,
      'common.bi.image': 'https://uicdn.toast.com/toastui/img/tui-image-editor-bi.png',
      'common.bisize.width': '251px',
      'common.bisize.height': '21px',
      'common.backgroundImage': './img/bg.png',
      'common.backgroundColor': '#fff',
      'common.border': '1px solid #c1c1c1',
    }
    return {
      useDefaultUI: true,
      options: {
        includeUI: {
          loadImage: {
            path: '',
            name: ''
         },
          theme: whiteTheme,
          initMenu: '',
          menuBarPosition: 'bottom',
          menu: ['crop', 'flip', 'rotate', 'draw', 'shape', 'icon', 'text', 'mask'], //, 'filter',
        },
        cssMaxWidth: document.documentElement.clientWidth,
        cssMaxHeight: document.documentElement.clientHeight,
        selectionStyle: {
          cornerSize: 20,
          rotatingPointOffset: 70
        }
      }
   }
 }
}

Collected from the Internet

Please contact [email protected] to delete if infringement.