[vue] Invalid Component definition

[Lukydemboy]

Trying to import icons from the new package, results in [Vue warn]: Invalid Component definition: /img/server-3-JttnEO.52a41a29.svg. I am using Vue and Electron builder.

I checked, the icon is present in node_modules and I can also import unrelated components.

I've made a quick example of how I am importing and using the icon.

[cbrwizard]

Hey, please ensure that your project can build and render any other .svg files

[sboesch]

I don't think there's an issue with this package, but more of an issue with Vue 3 and SVG loading. However, I'm also having problems with this and Symfony Webpack Encore.

I tried using https://github.com/visualfanatic/vue-svg-loader, but didn't manage to get it to work.

I'm always getting: "Unhandled Promise Rejection: InvalidCharacterError: The string contains invalid characters."

Has anyone successfully managed to get this package to work with Vue 3 and Webpack? A working example is highly appreciated.

[Lukydemboy]

Rendering other SVGs seem to work fine!

[cbrwizard]

As an experiment could you please edit the source of these svg images right in your node_modules folder and delete any extra commas you can find? See this issue for more info https://github.com/webalys-hq/streamlinehq-npm/issues/18

If that's the case then we'll fix this soon

[cbrwizard]

I have removed the extra commas for all images, please check if it had any effect on rendering them in Vue. Reinstall the package to get them fresh.

[lucasrusso95]

@cbrwizard I had the same problem, i can't import a icon in Vuejs. Nothing appears in code.

I only got success using it directly without import: -

:(

[cbrwizard]

Ok we should investigate how it works with Vue. @lucasrusso95 could you please specify the Vue version you're working with? And please paste the source code of the SVG file you're trying to render. And please show any related errors you're receiving. Also please show me how you're trying to import an icon. Thank you for any help!

[lucasrusso95]

@cbrwizard In version 2.x with vue create tool. The SVG was @streamlinehq/streamlinehq/img/streamline-regular/house-1-2aESuT.svg and i can't import as component to display in vue. I had to put as img src=" SVG "

[cbrwizard]

@lucasrusso95 does it work with other SVG files from outside of Streamline? If not, then you should consider enhancing your build system to support rendering SVG files in general as Streamline SVGs are the same as any other SVGs. Consider approaches from here https://github.com/shrpne/vue-inline-svg and here https://github.com/visualfanatic/vue-svg-loader

[lucasrusso95]

@cbrwizard I can see the SVG working using the img tag. But i can't define as component, as import in js code. Did you know?

[lucasrusso95]

@cbrwizard I think maybe that vue-wrapper-streamline make this function, but now deprecated to use only this library.

[lucasrusso95]

@cbrwizard I tried equal @Lukydemboy in first comment in this issue.

[Lukydemboy]

Thanks for reaching back to us @cbrwizard, just seeing your messages now! I reinstalled the package and checked the SVGs, no extra commas in any of SVGs, so I am sure these are the new files. However the problem persists, I am using vue 2.6.11 for this project.

I used the old package before with the exact same environment and that seemed to work perfectly! Also other SVGs seem to work fine. SVGs will render if I use the

[cbrwizard]

@Lukydemboy so you're saying that an SVG from this npm package doesn't work, but an SVG you've got when clicking "Copy" in Streamline website works? If that's so it's an issue on our side for sure and we must fix it. Could you please give a specific example with a name of which image doesn't load in npm but loads from "Copy"?

[lucasrusso95]

@cbrwizard If i put the svg path in img tag, this work. When i try to import in JS and use as component like the first comment from @Lukydemboy it dont work.

Do you understand?

[lucasrusso95]

How can i change the color using this library? Why streamline-vue-wrapper was deprecated?

[cbrwizard]

@lucasrusso95 does it work with other SVG files from outside of Streamline? If not, then you should consider enhancing your build system to support rendering SVG files in general as Streamline SVGs are the same as any other SVGs. Consider approaches from here https://github.com/shrpne/vue-inline-svg and here https://github.com/visualfanatic/vue-svg-loader

Please respond to this question.

We're deprecating wrappers because they would require more work to maintain and we're a small team and cannot afford that. Providing plain svg files is much simpler.

And there is currently an issue with changing colors https://github.com/webalys-hq/streamlinehq-npm/issues/15, today we're working on resolving it.

[lucasrusso95]

@cbrwizard Ok, have anyway today to change icon color in menu to other color when active in simple way ?

[Lukydemboy]

@cbrwizard, apologies for another late response, I am more active on gitlab than github. 😅 In the following example, you can see I have the same icon (server3 in this case, but this goes for all the icons I tried). Once imported using the Vue package, the other one copied from your website (as svg tag). It's only rendered once.

[cbrwizard]

We have recently recreated all assets and released a new NPM 3.0.1 version https://github.com/webalys-hq/streamlinehq-npm/releases/tag/3.0.1, please install it, fetch newest images and check if it helps you to install in Vue. At least it should be easier for you to edit colors and sizes

[lucasrusso95]

@cbrwizard I create a new vue project with vue create CLI, Default with Vue 2, and i tried to install the library. But when i try to import the icon, i got this error vue.runtime.esm.js?2b0e:619 [Vue warn]: Invalid Component definition: /img/house-2.55860859.svg

found in

---> at src/components/HelloWorld.vue

Do you can try using @vue/cli please to see the errors?

[Thomascogez]

I struggle a lot with that part too. Here how I solved it:

• install vue-svg-loader (https://www.npmjs.com/package/vue-svg-loader)
• Import all your icons like so : import Icon from "!!vue-svg-loader!@streamlinehq/streamlinehq/img/streamline-bold/arrows-diagrams/arrows/arrow-button-down-2.svg" So you need to put !!vue-svg-loader! at the beginning of your import to convert your svg files to actual vuejs components an get all the advantages of it

[thnee]

@cbrwizard Thank you for all your active responses in this repo. Right now, I think the documentation for this new package is very unclear. It says

Wrapper packages for React, Angular and Vue are deprecated and will be removed after August 1st 2021. Please use this new package instead, it provides a much better user experience.

But it does not at all explain what this new user experience is, with respect to React, Angular and Vue. It would be good to clarify this so people don't have to guess.

In this issue you mention

We're deprecating wrappers because they would require more work to maintain and we're a small team and cannot afford that. Providing plain svg files is much simpler.

So if I understand correctly you are removing support that existed previously, and the user experience is entirely different, and much more low level. (Not saying it's a bad design, just want to clarify).

So now, users of this package should use their own svg loader (or actually sprite generator for production websites) for whatever stack/framework they use to develop their app, and you do not provide any sprites in this package? This needs to be clarified in documentation.

[cbrwizard]

Thank you @thnee for expressing your concern. I agree that README could've been written more clearly. I've updated it, you can check the commit about it here https://github.com/webalys-hq/streamlinehq-npm/commit/4e452c0c4aafa128c10578bd11532d8b2e63f6e3

Users are expected to configure their app on their own so that their build system has support for svg files. This is straightforward in some frameworks (eg React). Solving this isn't an issue limited to Streamline, but it's about importing any svg files, so we have decided to not be responsible for that. However, if somebody writes a clear document on how to easily use this NPM package with Vue/Angular we'll be happy to include it in our README.

Previous wrapper packages relied on icon packages served separately. However, we don't create or maintain icon packages anymore. Maintaining them with our current frequent updates to icons and illustrations would be too much for us. Also previously in npm package icons were served in a custom format for no specific reason, so we saw an opportunity to simplify that as well by providing plain svgs. Without the custom format there is no need for a wrapper, so we're removing them as well.

We have never provided sprites and we have no plans to do so.

[thnee]

Ok I am sure this is obvious for everyone else, but since I did spend a bit of time on it, let me just post my solution.

Made a gulp script that copies files out of the streamline img directory in node_modules into assets/sprite/svg which is the directory used by the sprite generator @nuxtjs/svg-sprite.

For example

node_modules/@streamlinehq/streamlinehq/img/streamline-light/money-payments-finance/money/money-bags.svg

Is copied to

assets/sprite/svg/streamline-light/money-bags.svg

This works fine, but it's a bit annoying that all the files are categorized in various directories. Would be easier if they were all in one directory, each individual file name is globally unique anyway right?

const STREAMLINE_LIGHT_ICONS = [
  "interface-essential/login-logout/logout-1",
  "business-products/monetization-profits/monetization-approve",
  "money-payments-finance/money/money-bags",
  "users/geomertic-close-up-single-user-man/single-man-circle",
];

gulp.task("streamline-icons", (done) => {
  const baseDir = "./node_modules/@streamlinehq/streamlinehq/img/streamline-light";
  for (const file of STREAMLINE_LIGHT_ICONS) {
    const parts = file.split("/");
    const fileBaseDir = parts.slice(0, -1).join("/");
    const fileName = parts.slice(-1)[0];
    gulp
      .src(`${baseDir}/${fileBaseDir}/${fileName}.svg`, {
        base: `${baseDir}/${fileBaseDir}`,
      })
      .pipe(gulp.dest("assets/sprite/svg/streamline-light"));
  }
  done();
});

[cbrwizard]

Today we announce that we're deprecating the Streamline NPM package. Instead, we’ll focus on the web app and Figma plugin, which are used by a noticeable share of our customers.

Please from now on instead of using our brittle package download the images directly from our website and insert them into your project as SVG files. Meanwhile, Streamline team is focused on ensuring that our web application provides the best user experience for developers' use cases. Please take 2 minutes to share feedback so that we can improve.

We'll keep this package with minimal life support until 1st November 2022, after which it's going to be deleted.

Please read the full story in this article.