Icon string with multiple lines throws error

[greggilbert]

Given this:

    var self = this;
    this.$toasted.show('Hello, this is a test!', {
      icon: {
        name: 'fas fa-check-circle'
      }
    });

throws this error:

[Vue warn]: Error in created hook: "InvalidCharacterError: String contains an invalid character"

Specifically this:

The token provided ('fas fa-check-circle') contains HTML space characters, which are not valid in tokens

Per the docs it should work fine. Any ideas?

[rizzdev]

any idea on this one?

[robjbrain]

Having this exact same error when using an example straight from the docs

docs: https://github.com/shakee93/vue-toasted/blob/master/examples/using-icons.js

example:

Vue.toasted.show(
    'hello there, i am a toast !!', {
        icon: {
            name: 'fal fa-check fa-spin fa-fw',
        }
    });

results in:

DOMException: Failed to execute 'add' on 'DOMTokenList': The token provided ('fal fa-check fa-spin fa-fw') contains HTML space characters, which are not valid in tokens.

Did either of you resolve this @rizzdev or @greggilbert ?

[robjbrain]

It seems to come from here: https://github.com/shakee93/vue-toasted/blob/8e49008aefec53331f30f5dd75e7c113bd3580ee/src/js/show.js#L190-L197

The name is put into classList.add which only accepts one string at a time.

There's a commit here which seems to allow for adding an array of classes (at least that's what the commit message says) https://github.com/shakee93/vue-toasted/commit/7f32d03eef40305cecb202fc5375e82bcaf63aff#diff-20d2b7593390e44ab67b3919ea1ececc

but it only works for the "custom-class" option.

So you would have to do this:

Vue.toasted.show(
    'hello there, i am a toast !!', {
        iconPack: 'custom-class',
        icon: {
            name: 'fas fa-spinner fa-spin',
        }
    });

I'm not sure if it's a case of the documentation needing updating or the code needing fixing, @shakee93 ?

[shakee93]

you can use "custom-class" and achieve this.