SVG icons are not displayed on the editor

[HT-Moh]

Hi

I created a basic implementation of the TOAT UI using vuejs however I am facing an issue with the svg icons which are not displayed somehow. I tried everything importing directly the icons on the header of HTML, using vuejs ... the icons are loaded by not displayed.

<template>
<div class="imageEditorApp">
    <tui-image-editor ref="tuiImageEditor"
                      :include-ui="useDefaultUI"
                      :options="options"
                      @addText="onAddText"
                      @objectMoved="onObjectMoved">
    </tui-image-editor>
</div></template>

<script>
// Load Style Code
import  "tui-code-snippet";
import  "fabric";
import  "tui-image-editor";
import { ImageEditor, whiteTheme } from "@toast-ui/vue-image-editor";
// To use the basic UI, the svg files for the icons is required.
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 "tui-image-editor/dist/tui-image-editor.css";


export default {
  name: "KeyImageEditor",
  props: ["label", "required", "max", "type"],
  data: function() {
    return {
      useDefaultUI: true,
      options: {
        // for options prop
        selectionStyle: {
          cornerSize: 20,
          rotatingPointOffset: 70
        },
        includeUI: {
          theme: whiteTheme, // or whiteTheme
          menuBarPosition: "bottom",
          menu: [
            "crop",
            "flip",
            "rotate",
            "draw",
            "shape",
            "icon",
            "text",
            "mask",
            "filter"
          ],
          initMenu: "filter"
        }
      }
    };
  },
  computed: {},
  methods: {
    onAddText(pos) {},
    onObjectMoved(props) {}},
  watch: {},
  components: {
    "tui-image-editor": ImageEditor
  }
};
</script>

[jungeun-cho]

@HT-Moh import { ImageEditor, whiteTheme } from "@toast-ui/vue-image-editor"; Where is whitetheme from? Delete the includeUI.theme property from the options.

If you want to use a custom theme, check out the example here

[HT-Moh]

@jungeun-cho thank you, but this is not the problem, I remove it but it still same issue with this svg, but the way the xlink:href is deprecated.

[powolnymarcel]

Same issue for me as well

[lewis-ing]

you should add rule for the vue.config.js file ,code as example:

const path = require('path');

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

[hzeeli]

seen in example,

// To use the default UI, the svg files for the icons is required

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';

[HT-Moh]

Thanks @lewis-ing it worked.

[weilephp]

Same issue for me as well and my project use vue-cli2. how to dealwith by vue-cli2?

[arifhussain353]

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')
var blackTheme = { // or white
  // main icons
  'menu.normalIcon.path': icond,
  'menu.activeIcon.path': iconb,
  'menu.disabledIcon.path': icona,
  'menu.hoverIcon.path': iconc,
}

And in option :

 options: {
        includeUI: {
          theme: blackTheme, // or white
        }
      }

This solution work for me.

[weilephp]

Thanks @arifhussain353 it worked

[marijndegen]

you should add rule for the vue.config.js file ,code as example:

const path = require('path');

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

Dude thnx mate this really worked!!! You made my day :D

[rChinnnn]

I changed the outputPath and it worked.

outputPath: 'Sketch_Edit/'

my Vue router

    {
      path: '/Sketch_Edit/:Product_No',
      meta: {
        title: 'dev - Sketch_Edit'
      },
      name: 'Sketch_Edit',
      component: () => import('./components/pages/Sketch_Edit.vue')
    },

---

you should add rule for the vue.config.js file ,code as example:

const path = require('path');

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

It worked for me, too. Normally SVG displayed Pic Thanks!! But when I change Vue router path, SVG icons are not displayed... It's my Code

...
    {
      path: '/test/Sketch_Edit',
      meta: {
        title: 'dev - Sketch_Edit'
      },
      name: 'Sketch_Edit',
      component: () => import('./components/pages/Sketch_Edit.vue')
    },
...

So I can't set up route.params to do something, it bothers me a lot. Should I add or change something in vue.config.js ?

[AruXc]

It worked for me.
...
import { ImageEditor } from '@toast-ui/vue-image-editor'
// copy example white-theme.js to project and export it
import whiteTheme from '@/assets/sass/components/white.js'
import 'tui-image-editor/dist/tui-image-editor.min.css'
import icona from 'tui-image-editor/dist/svg/icon-a.svg'
import iconb from 'tui-image-editor/dist/svg/icon-b.svg'
import iconc from 'tui-image-editor/dist/svg/icon-c.svg'
import icond from 'tui-image-editor/dist/svg/icon-d.svg'

whiteTheme['menu.normalIcon.path'] = icond
whiteTheme['menu.activeIcon.path'] = iconb
whiteTheme['menu.disabledIcon.path'] = icona
whiteTheme['menu.hoverIcon.path'] = iconc
whiteTheme['submenu.normalIcon.path'] = icond
whiteTheme['submenu.activeIcon.path'] = iconb
...
      useDefaultUI: true,
      options: {
        includeUI: {
          theme: whiteTheme
        },
...

[xuanfengkou]

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')
var blackTheme = { // or white
  // main icons
  'menu.normalIcon.path': icond,
  'menu.activeIcon.path': iconb,
  'menu.disabledIcon.path': icona,
  'menu.hoverIcon.path': iconc,
}

And in option :

 options: {
        includeUI: {
          theme: blackTheme, // or white
        }
      }

This solution work for me.

but second menu-icon can not show?

[Jaha96]

This worked for me!

`import 'tui-image-editor/dist/tui-image-editor.css' 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 blackTheme = { 'menu.normalIcon.path': icond, 'menu.activeIcon.path': iconb, 'menu.disabledIcon.path': icona, 'menu.hoverIcon.path': iconc, 'submenu.normalIcon.path': icond, 'submenu.activeIcon.path': iconb }

import { ImageEditor } from '@toast-ui/vue-image-editor'`