SVG import fails in Angular project

[elodieWittym]

Hello,

I tried to use this package in my angular project, but the svg import fails. I installed the version 2.0.0 with npm, and the package seems to be correct. However when I tried to import a svg in a .ts file with import HouseChimney from '@streamlinehq/streamlinehq/img/streamline-regular/house-chimney-eLjAc5.svg'; I have this error : With this indication : TS2307: Cannot find module '@streamlinehq/streamlinehq/img/streamline-regular/house-chimney-eLjAc5.svg' or its corresponding type declarations.

I followed and steps of the tutorial and I think that the streamlinehq.json is ok, with families and my token.

Thank you for your help.

[cbrwizard]

Before continuing, please clarify:

1. Can you import any not related to Streamline SVG file?
2. Can you check node_modules folder and ensure that this image file exists there?

The way I see it is that your build system needs to know how to build any svg file. Create-react-app does that out of the box, but different build systems might do that differently. Which build system are you using?

Check https://stackoverflow.com/questions/44717164/unable-to-import-svg-files-in-typescript page, maybe just declaring a module "*.svg" will be enough.

[atbostudio]

adding a *.d.ts for (e.g. svgimport.d.ts) in under folder as your mentioned in the referenced article fixes the build errors (tested with angular/angular-cli 11.2.1), but the autocomplete still doesn't work. i think, that the autocomplete would require a clean typescript module and or type definitions and not just the path reference to a file. for no this works but should be improved either by creating a npm module with type definitions/exports or for the beginning by adding a better documentation/examples for the different frameworks like angular, react.

content of svgimport.d.ts example as mentioned in https://stackoverflow.com/questions/44717164/unable-to-import-svg-files-in-typescript declare module '*.svg' { const content: any export default content }

the extra include is not necessary as long as the .d.ts file is in /src folder because of the angular project default imports defined in tsconfig.app.json.

[cbrwizard]

I'm not sure how would you add types to .svg files 🤔 I'm not sure how types can be improved here. If you know a concrete thing which can be done to improve the situation please share it and we would implement it.

[atbostudio]

currently i am searching for a way to display the icons without using the img tag. the only way i managed to include the icons is by using the tag. but i need to style the icons within my application, so the use of inline svgs is required. the only thing which currently might work is making react runnable in angular applications. but that's but impossible in my use case.

can you provide an example of an angular application which is styling the icon without importing them as react components?

[cbrwizard]

Being able to style svgs inline is crucial indeed. Have you tried this approach? https://angular.io/guide/svg-in-templates

[atbostudio]

a few minutes ago we decided to stop trying the programmatic approach. the main reason is not just these issues we are facing with the given package. due to general browser and performance requirements we decided to download the used icons from the streamline app and wrap them in a font with a custom angular component as wrapper.

your mentioned approach would require a custom component or module as wrapper, which should be possible.

also the use of the raw-loader in the imports could make the placement of the plain svg possible. e.g. import PoliceHat2 from '!!raw-loader!@streamlinehq/streamlinehq/img/streamline-regular/police-hat-2-eLjjYq.svg'; but some browsers might block the rendering of innerHTML and - for sure - this is not a good way to go. (XSS, ...)

btw thanks for your awesome icons!

[cbrwizard]

Thank you for mentioned solutions 👍 we might consider adding this custom wrapper inside an angular example app

[certainlyakey]

I'm struggling with the same problem as well. Please provide not just a React example of integration but also Angular example in the docs as soon as possible.

If you're willing to remove support for a deprecated version of the package in such a short term, you need to make sure that upgrade goes smoothly for the customers.

[cbrwizard]

The flow for adding SVG images from Streamline for Angular project should be the same as with adding SVG images from any other source. Can you ensure that you can load other SVG files first? Maybe this link can help https://angular.io/guide/svg-in-templates

[certainlyakey]

This link suggests that we have a separate Angular component per each icon that we use in a project. So if i use 90 icons i must end up having 90 new components. This isn't a best practice definitely for a most likely usage context of Streamline icons.  Regarding other SVG images - again, there's a lack of documentation currently for the new version when the package is used with Angular. If Angular doesn't support loading SVGs out of the box, then the example should demonstrate how to enable the support.Sent from Yandex.Mail for mobile: http://m.ya.ru/ymail15:07, May 21, 2021, Fyodor Ivanischev @.***>: The flow for adding SVG images from Streamline for Angular project should be the same as with adding SVG images from any other source. Can you ensure that you can load other SVG files first? Maybe this link can help https://angular.io/guide/svg-in-templates

—You are receiving this because you commented.Reply to this email directly, view it on GitHub, or unsubscribe.

[iraghumitra]

Hey, first of all, beautiful icon set.

The migration path for customers using angular is not very clear. Though it might not be difficult to migrate having a clear path would make customers' transition smooth.

If you don't have too many angular devs in your team, there is nothing wrong with asking your customers, some of them might be happy to help :).

I have created a jist on how I created an angular wrapper to render icons. My pre-requisites for the component are:

• I want to keep the template (read as html) changes to a minimum.
• Options to override stroke, fill, and size

The tag for the icon set is intentionally kept the same to avoid any changes.

Check the gist here

Happy to give you the end-to-end changes required to make it work in case if you are interested.

[cbrwizard]

That's impressive @iraghumitra, thank you for publishing this gist! It's a pity that because of the way streamline svg files are served right now there is no easy way of manipulating size and colors. This should change with the upcoming major release though. Let's see after the release if this wrapper still helps.

[iraghumitra]

No worries will be looking forward to the wrapper. Despite the problems, I would still prefer streamline that says something about your icon-set kudos to the entire team.

[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. Now colors in one-colored families are replaced by currentColor and for them you can pass stroke/fill to the svg tag itself.

[Franco-Alejandro]

Hello, I'm currently migrating from the wrapper. Currently having the same issues as described above. I will share my custom wrapper once it's finished... if it is generic enough and isn't a mess haha.

Btw, I'm happy @cbrwizard is so active on these threads! keep up the good work :)

[Franco-Alejandro]

Okay, here's what we did, although it isn't the best solution in terms of assets management, since we needed to be careful and only add the folders we want from the package.

So, for example, if you want to use NavigationMenuHorizontal2 you'd need to include that into your angular.json file. So instead of adding each icon, we selected packages we needed. For the example, we used '@streamlinehq/streamlinehq/img/streamline-light/interface-essential/menu/', so you need to add under "assets" the following structure

  {
    "glob": "**/*",
    "input": "node_modules/@streamlinehq/streamlinehq/img/streamline-light/interface-essential/menu/",
    "output": "assets"
  }

Basically copies the stuff inside to the assets folder, you can specify types of files and other things if you want to.

Then we just created a simple component and used a pipe to import dynamically the SVG files as strings. You can figure out the name for an svg or path to a folder of assets from the streamline app (https://app.streamlinehq.com/icons) - our implementation is kind of messy right now. We made the icons part of the innerhtml of our custom component, which is a simple div. In our case it'd be <div class="svg" [inlineSVG]="icon"></div> since we used this package https://www.npmjs.com/package/ng-inline-svg

You can basically use any method to get the icons from the assets folder and set it as part of the component, here's a guide we found: https://www.chrisjmendez.com/2017/06/17/angular-dynamically-inserting-svg-into-an-element/

You can customize the component following the gist from @iraghumitra. We choose not to do this since most of our themes are already set on scss and instead, we just disable the view encapsulation using ::ng-deep and change the SVG styles there. It isn't pretty as of now, but hopefully, we can make the component a bit more personalizable in terms of styles in the future

I hope this brief explanation can help some of you, also if you find a way to improve this somehow it'd be of great help!

Looking forward to the wrapper as well! 😄

[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.