Missing Icons

[thomaswoj]

Hi Ankurk91,

My trumbowyg icons appear to be missing.

I have installed via npm in laravel 5.6.7:

"trumbowyg": { "version": "2.9.4", "vue-trumbowyg": { "version": "3.1.2",

---

Webpack file:

mix.autoload({
    'jquery': ['$', 'window.jQuery', 'jQuery'],
    'vue': ['Vue','window.Vue'],
})

mix.js('resources/assets/js/app.js', 'public/js')
   .sass('resources/assets/sass/app.scss', 'public/css');

mix.copyDirectory('node_modules/trumbowyg', 'public/trumbowyg');

---

vue component:

<template>
    <div>
        <trumbowyg v-model="content"></trumbowyg>
    </div>
</template>

<script>
    // Import this component
    import trumbowyg from 'vue-trumbowyg';

    // Import editor css
    import 'trumbowyg/dist/ui/trumbowyg.css';

    import svgIcons from 'trumbowyg/dist/ui/icons.svg';

    export default {
        data () {
            return {
                content: '',
            }
        },
        components: {
            trumbowyg
        }
    }
</script>

---

Still nothing, any ideas?

Thanks,

Tom

[ankurk91]

May in know your Laravel mix version, i think you are using v2.x ?

[thomaswoj]

Yup,

"laravel-mix": { "version": "2.0.0",

[ankurk91]

I am looking into it. Just to let you know, you no need to import svg icons, the component is already doing this for you.

[thomaswoj]

Thanks 👍

[ankurk91]

And make sure you have jquery installed

[ankurk91]

To be honest; i have not tested it with Laravel mix v2.0 v2.0 handles svg files differently now. https://github.com/JeffreyWay/laravel-mix/pull/1367

Do you see any errors in console ? Everything else in editor is loading properly and just icons are missing ?

[thomaswoj]

No errors in console,

But looking at the icons.svg the file looks small/empty, should there be data inside?

[ankurk91]

Ok, A quick workaround is to pass your custom svg icon file path via prop.

 <trumbowyg
              v-model="content"
              class="form-control"
              svg-path="https://unpkg.com/trumbowyg@2.9.4/dist/ui/icons.svg"
            ></trumbowyg>

Also can you try disabling image optimization by Laravel mix

// webpack.mix.js
mix.options({
  imgLoaderOptions: {
    enabled: false
  },
});

[thomaswoj]

Hmmm, getting a vue error in console when adding ,

[ankurk91]

Don't copy my code blindly. All you need to do is - add this prop to your component

 svg-path="https://unpkg.com/trumbowyg@2.9.4/dist/ui/icons.svg"

[thomaswoj]

My Apologies, I misunderstood.

Yup - icons are now loading correctly with the workaround. :)

This should be fine as I don't need the icons locally.

Many thanks for your help Ankurk, it's greatly appreciated.

[ankurk91]

Glad to know. I will test it with Laravel mix v2.x soon and will post back here.

[ankurk91]

I can confirm that this isimg-loader issue in Laravel-mix. Disabling image loader fixes this issue.

Here is how to fix this issue:

// webpack.mix.js
mix.options({
  imgLoaderOptions: {
    enabled: false
  },
});