This package won't install with yarn berry. I believe it is due to the projectFolderPath variable being hard coded, which doesn't work for yarn's folder structure.

Steps to reproduce:

1. in example-app run yarn set version berry
2. yarn install

I feel like we could find a better way to import the configuration values than requiring to use a private streamlinehq.json file. The most straightforward solution would be to read the parent project's .env file, however that might be too intrusive. Or am I overthinking this?

Streamline team wants your feedback on this 🙏

Hi,

Because of the latest changes to use hash in the end of the files I was wondering the reasons for that and noticed that this repo is not using Pull Requests, which made the tracking for this change hard to find in all the spread commits.

During the post install we are getting the following error:

This happens locally and when we build via Vercel.

I pulled a project (which works on my other device using ubuntu and on a netlify build) onto my macbook. Now when trying to run npm install it throws a 404 for the streamline-bold package.

I configured my streamline throught the streamlinehq.json file:

{ "families": ["streamline-regular", "streamline-bold"], "secret": "<-- secret token -->" }

Overview

When building with React/Material-UI, we rely on theme overrides to do a majority of our custom styling, and avoid as much extra CSS as possible. As such, the fill attribute on each icon forces us to decode each icon's data string in order to manipulate its color.

Suggestion

It'd be great if the fill attribute was a configuration option (default to true), so that we could pass the color as props to the icon element.

Example

import { ReactComponent as StreamlineIcon } from '@streamline/path/to/icon.svg';

<StreamlineIcon fill="#f0f" />

Hi there,
good news, i got the icons dispalyed in my application. And i really like your wrapper.

But it gives me this error:

Build at: 2021-03-26T15:23:46.856Z - Hash: 8a2be9b6de33040e9a29 - Time: 9179ms

Warning: C:\Users\t\angular\libs\room-management\src\lib\shared-components\room-header\room-header.component.ts depends on '@streamlinehq/streamline-regular/lib/users'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies

Warning: C:\Users\t\angular\libs\room-management\src\lib\shared-components\room-header\room-header.component.ts  depends on '@streamlinehq/streamline-regular/lib/health-beauty'. CommonJS or AMD dependencies can cause optimization ba
ilouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies

** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **

I have tried using this package in a NextJS app (version ^10.2.0), and the icons were not showing. I did the same steps in a create-react-app, and it worked.

Steps:
1). Add STREAMLINE_SECRET=... and STREAMLINE_FAMILIES=["streamline-bold"] in .env
2). npm i (and confirm that all icons are listed in node_modules, in @streamlinehq/img)
3). Use it.

import GaugeDashboard from '@streamlinehq/streamlinehq/img/streamline-bold/gauge-dashboard-08UEkd.svg';

function index() {
	return (
			<img
				src={GaugeDashboard}
				alt="GaugeDashboard"
				height="30"
				width="30"
			/>
	);
}

export default index;

Nothing shows up in the NextJS app. In a useEffect (on init), I console log GaugeDashboard and can see it's an SVG.

In the console it says "Warning: Invalid value for prop src on tag. Either remove it from the element, or pass a string or number value to keep it in the DOM."

Any help would be greatly appreciated.

We're trying to use the package in our project, and currently it requires an exact match for the Node/NPM versions:

"engines": {
    "node": "14.15.0",
    "npm": "6.14.8"
}

Are these constraints necessary? Or if they are, would it be possible to loosen the constraints to a reasonable minimum like below?

"engines": {
    "node": "^14",
    "node": "^6",
}

Right now the package won't even install - using --ignore-engines makes the installation proceed to the postinstall step, but then it fails there instead.

Hello! I'm unable to install the package in Next.js as it uses .env.local instead of .env

This is not only related to next.js as in other projects I also like to have this structure in order to have different .env, for example .env.staging, .env.prod, .env.dev etc

When implementing the icons using the NPM package the deployment on GitLab pages fails. Locally all works fine.

GitLab pages job log:

(node:70) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 3159)
(node:70) UnhandledPromiseRejectionWarning: Error: ENOENT: no such file or directory, mkdir '/builds/vitronic-web-ui/design-library/node_modules/@streamlinehq/streamlinehq/build/../img/streamline-light'

.

Since 3.0.2 the install script is broken when using streamlinehq.json.

Error get during install TypeError: Cannot read property 'replace' of undefined

I think it come from this change:

    const familiesFromEnv = process.env.STREAMLINE_FAMILIES.replace(/\\/g, '')

Hello, we recently migrate our applications to use your new package. But since the today update that introduce a hash in the name of each icons we got some problem. Since, we are using StreamlineIcons since a while, we have in our database some entries that contain icons name with the old format.

My question is: Can we get / How to calculate the hash of an icon like that we could be easily convert to the new icon format. Thanks in advance

Hi!
I have been trying to config my webpack for hours now so it works with streamlinehq. It works perfect if I use a releative path, but as soon as im trying to load from @streamlinehq/streamlinehq/img/streamline-regular/shopping-ecommerce/discount-coupons/discount-bubble.svg it fails. Its trying to load it relative.

import { ReactComponent as DiscountBubble } from '@streamlinehq/streamlinehq/img/streamline-regular/shopping-ecommerce/discount-coupons/discount-bubble.svg';

Im using svgr and file-loader with a webpack config like this.

{
	test: /\.svg$/,
	use: [
		{
			loader: '@svgr/webpack',
			options: {
				publicPath: '/',
			},
		},
		{
			loader: 'file-loader',
			options: {
				name: 'svg-[hash:hex:10].[ext]',
				publicPath: '/',
			},
		},
	],
},

I have been trying without the file-loader but it doesn't help.

Have you awesome devs any suggestions on what's going wrong?
I've been playing around with publicPath but no help there. Should I use something else than file-loader?

Some context: we're pulling in icons from streamline-bold and running them through SVGO before including them in our React components. We noticed a bit of an oddity when we optimized some of the SVGs coming in from Streamline. Any icon that includes multiple paths (which is most of them) have unnecessary commas present in between the path elements.

For example, a snippet from layers-back-wvSgsU.svg

stroke-linejoin="round"    />,<path d="M21.5,7h-2a1,1,0,

This doesn't seem to have any effect on the SVG itself being rendered (it's valid XML I think?). It is, however, a bit awkward for our particular use case. Tools like SVGOMG handle the comma just fine, but it stands out a bit in resulting optimized SVG. I've never seen commas placed in between paths like this in an SVGs before. Sort of wondering if these commas have any purpose or are just an extra artifact of some build process.

Hi,

Installing families given as example in the documentation works well but when I try to install other families like "kameleon" or "streamline-colors" I get this kind of error.

npm ERR! Installing Streamline assets for kameleon families
npm ERR! Error
npm ERR! Error: Got error "unable to process request at this time"
npm ERR!     at /home/hail/icons/node_modules/@streamlinehq/streamlinehq/build/index.js:1:4437
npm ERR!     at /home/hail/icons/node_modules/@streamlinehq/streamlinehq/build/index.js:1:1702
npm ERR!     at Object.next (/home/hail/icons/node_modules/@streamlinehq/streamlinehq/build/index.js:1:1807)
npm ERR!     at i (/home/hail/icons/node_modules/@streamlinehq/streamlinehq/build/index.js:1:546)
npm ERR!     at processTicksAndRejections (node:internal/process/task_queues:94:5)

I firstly tough to a trial limitation but it also fails after the first payment.

Since streamlinehq.json is not supposed to be in the repo, deploying to Vercel fails because the build doesn't find the proper json config to add the streamline package.

Do you have a preferred workaround for this?

Hello,

for security reasons we are working behind a corporate proxy.

While installing @streamlinehq/streamlinehq we retrieve following error.

Installing Streamline assets for ...
API error: self signed certificate in certificate chain
Error: self signed certificate in certificate chain
at TLSSocket.onConnectSecure (_tls_wrap.js:1321:34)
at TLSSocket.emit (events.js:210:5)
at TLSSocket._finishInit (_tls_wrap.js:794:8)
at TLSWrap.ssl.onhandshakedone (_tls_wrap.js:608:12) {
code: 'SELF_SIGNED_CERT_IN_CHAIN'
}

we already tried to add our ca file using npm config set cafile but it is still not working.
any suggestions?

the previous npm packages worked well

kind regards

I've created a streamlinehq.json file on my root folder, added proper secret, yet I keep receiving the following message while trying to install:

Error: https://npm.cloudsmith.io/streamlinehq/streamline-icons/@streamlinehq%2fstreamlinehq: authentication required

Do you happen to know what's going on?

Thanks!

We have an application that's using RushJS, a monorepo manager. Because of this the node_modules aren't in the typical location. When I console.log the projectFolderPath. I can see that it's resolving to: /Users/nickl/git/MyApp/common/temp/node_modules/.pnpm/@[email protected]/node_modules/@streamlinehq/streamlinehq/build/../../../..

The resulting error in the build is:

STREAMLINE_FAMILIES env var must be proper JSON
Error
STREAMLINE_FAMILIES and STREAMLINE_SECRET must be set in your env or .streamlinehq.json file must be present in parent folder

Ideally it would look for a .env at the root of the project /Users/nickl/git/MyApp, or where the npm script was ran from: /Users/nickl/git/MyApp/apps/MySubPackage.

I'm not sure what the right solution for this problem is. It seems like one solution would be to have the ability to set an environment variable to tell it where the root of the project is.

We might be leaning towards just the placing the static files into our own repo or S3 so we don't need to deal with setting environment variables across our CI/CD.

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.

Might not be an issue related directly to streamline, I'll let you be the judge of that, but maybe you can help me, as well as others with the same issue.

In a Rails 6 app, using webpack, I'm importing 2 icons with the same name from 2 different families:

import Bulb from '@streamlinehq/streamlinehq/img/streamline-light/work-office-companies/ideas-creativity/bulb.svg'
import BulbBold from '@streamlinehq/streamlinehq/img/streamline-bold/work-office-companies/ideas-creativity/bulb.svg'

Since they're imported, webpack compiles them:

media/ideas-creativity/bulb-7f5217db.svg   503 bytes               [emitted]              
media/ideas-creativity/bulb-faf84d2c.svg    1.16 KiB                  [emitted]             

but... as you can see, they have the same name, which prevents me from using them with image_pack_tag.

Hello, I just started implementing npm in our project. npm module seems installed correctly and I can see some icons on my app, although. seems there are missing icons like this "Travel Hotel 5 Star" that I need to use

I find the icon on https://app.streamlinehq.com/icons/streamline-bold search but the svg file is not in my node_module folder

missing:
node_modules/@streamlinehq/streamlinehq/img/streamline-bold/travel-hotel-5-star-sjs9Ht.svg

I tried to re install the module 3 times, still same:

btw I use Yarn, and has this line in package.json file "@streamlinehq/streamlinehq": "^2.1.0",

The problem

Reinstalling the package doesn't download added families to the STREAMLINE_FAMILIES environment variable

Expected behaviour

The new images should be installed

Steps to reproduce

1. Install package as instructed in documentation
2. Add a new family into the STREAMLINE_FAMILIES array
3. Reinstall package to download new images

Is there a way to do this? Currently, my solution is to uninstall the package first before installing it again. It's not a desirable solution as it's a fresh install and downloads every single image each time.

The problem when downloading streamline package from this registry (https://npm.cloudsmith.io/streamlinehq/streamline-icons/). It looks like the package is downloading from dynamic IP. Since we have restrictions in the proxy. We cannot whitelist the dynamic IP. We also whitelisted the above-mentioned URL in our proxy list. But nothing works. Please check the logs below.

@streamlinehq/[email protected] start
node build/index.js

Installing Streamline assets for streamline-regular, streamline-light, streamline-mini-bold, streamline-bold families
API error: connect ETIMEDOUT 46.252.181.103:443
Error
{ Error: connect ETIMEDOUT 46.252.181.103:443
at TCPConnectWrap.afterConnect [as oncomplete] (net.js:1106:14)
errno: 'ETIMEDOUT',
code: 'ETIMEDOUT',
syscall: 'connect',
address: '46.252.181.103',
port: 443 }
npm ERR! code 1
npm ERR! path ##########/node_modules/@streamlinehq/streamlinehq
npm ERR! command failed
npm ERR! command sh -c node build/index.js

Any solution to this problem?

The ask

Would it be possible to configure a way to set the destination of the images directory.

The why

My team is building a (private, not open source) design system / component library and we want to include assets in the component library package, so consumer applications don't need to install streamline packages. It's not ideal to require consumer applications to configure streamline's npm registry -- this becomes particularly cumbersome in CI/CD workflows.

Hi there,

we are experiencing a problem as we aren't able to run a deployment pipeline b/c of Streamline icons cannot be resolved.

./src/components/modules/navigation/HeaderMenu.tsx
Module not found: Can't resolve '@streamlinehq/streamlinehq/img/streamline-bold/social-instagram-Nc3WWa.svg' in '/usr/src/app/src/components/modules/navigation'
./src/components/modules/navigation/HeaderMenu.tsx
Module not found: Can't resolve '@streamlinehq/streamlinehq/img/streamline-bold/social-media-facebook-1-LXc7gT.svg' in '/usr/src/app/src/components/modules/navigation'

When I tried to use material-solid family there always shows an icon of a teacher with question mark.

import InterfaceSettingMenuVertical from '@streamlinehq/streamlinehq/img/streamline-bold/interface-setting-menu-vertical-Nc3niS.svg';

this icon import fails to resolve, other icons work fine.

version of @streamlinehq/streamlinehq is 2.1.0.

I'm in a situation where I want to allow people to contribute to my open source project, but I can't give them my Streamline token, so I want people who don't have the token to see placeholders instead of icons. Currently the Streamline's script which fetches images throws when the request fails, which prevents people from using my repository at all.

I was thinking if you could add an additional environment variable STREAMLINE_REQUIRED which people can set to false, or maybe allow me to set it to false by default in my project somehow, to not welcome people with an error, I haven't really thought this part through. In that case the script would print out a mild warning that the environment variables are missing, and that's all. Then I can hijack Streamline imports with webpack or whatever and alias them to my placeholder icon.

Alternatively, would it be ok to copy over the install script myself instead of installing the package itself, run it and catch the error? I would ignore the directory with the icons, of course.

Installing Streamline assets for streamline-regular, streamline-bold, streamline-light families
Error parsing JSON from request

When importing the Building1 icon and setting a fill color, it does not get applied due to the structure of the icon, i.e. the shape that forms the front of the building is not a single entity, and so a fill cannot be applied. It would be great if the SVG could be rebuilt to allow a defined fill and prevent any background color from coming through.

Example of what is desired (with a white fill):

Example of current state (without a fill):

Specific icon import:
import Building1 from '@streamlinehq/streamlinehq/img/streamline-regular/building-1-6nlwop.svg'

Apologies if this is not the right place to raise this issue.

There seems to be a bug. All files matching @streamlinehq/streamlinehq/img/streamline-light/money-payments-finance/modern-payments/cashless-* are just blank, whereas other files in the same directory and other directories are not.

The way I have tested this is simply by opening them in google-chrome and for those broken files, there is nothing but white on the screen, whereas with other files, the icon is visible.

Codepen Link

Old Icon vs New Icon

Error installing Streamline-mini-bold and streamline-micro-bold via npm started about 2 hours ago. Any changes?

Installing Streamline assets for streamline-bold, streamline-micro-bold, streamline-mini-bold families
Error
Error: Got error "You can not download streamline-micro-bold family in SVG"
    at /opt/app/node_modules/@streamlinehq/streamlinehq/build/install.js:1:4661
    at /opt/app/node_modules/@streamlinehq/streamlinehq/build/install.js:1:1702
    at Object.next (/opt/app/node_modules/@streamlinehq/streamlinehq/build/install.js:1:1807)
    at i (/opt/app/node_modules/@streamlinehq/streamlinehq/build/install.js:1:546)
    at processTicksAndRejections (internal/process/task_queues.js:97:5)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! @streamlinehq/[email protected] postinstall: `node build/install.js`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the @streamlinehq/[email protected] postinstall script.```

I missed something or ReactComponent is not available for streamline-freehand ?
How I can change the second color icon in my app when I'm importing with npm ?
I have to download icons manually ?

Is there an easy way to preserve the spin attribute from the react wrapper in the deprecated package?

When importing the HumanResourcesSearchTeam icon and setting a fill color, part of the icon gets covered by the fill.

Example of what is desired (with a white fill):

Example of current state (with white fill applied):

Specific icon import:
import HumanResourcesSearchTeam from '@streamlinehq/streamlinehq/img/streamline-regular/work-office-companies/human-resources/human-resources-search-team.svg'

I got this error in terminal.

API error: connect ECONNREFUSED 127.0.0.1:8080
Error
Error: connect ECONNREFUSED 127.0.0.1:8080
at TCPConnectWrap.afterConnect [as oncomplete] (net.js:1146:16) {
errno: -4078,
code: 'ECONNREFUSED',
syscall: 'connect',
address: '127.0.0.1',
port: 8080
}

Someone can help me?

The use of the bold icons here (and perhaps others) are missing stroke-width="0", which dramatically alters their appearance and seems incorrect.

@streamlinehq/streamlinehq/img/streamline-mini-bold/interface-signal-graph-circle-fSZsW6.svg
@streamlinehq/streamlinehq/img/streamline-mini-bold/interface-arrows-button-down-wvSWQD.svg
@streamlinehq/streamlinehq/img/streamline-mini-bold/interface-help-question-circle-9ULQpG.svg
@streamlinehq/streamlinehq/img/streamline-mini-bold/interface-user-circle-Q3ywqY.svg

For these SVG using fill, the reliance on stroke-width 0 creates their "bold" effect, which when missing defeats the purpose (they appear hairline).

Example of our topnav with prior edition of streamline components:

And now without stroke-width="0":

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.

$ npm start

> @streamlinehq/[email protected] start
> node build/index.js

Installing Streamline assets for streamline-regular families
Finished installing Streamline assets.
✨  Done in 3.04s.

but... no files created - resulting in unresolved icon packages
issue since few hours. Licence and family configuration are present and configured according to npm documentation.

Sometimes Streamline backend can be unresponsive. While we're working on increasing the stability of the server-side code we should also ensure that this NPM package's install script handles not responsive backend correctly.

At least there should be a timeout error and proper message. Also it should somehow help with installing streamline families in batches.

when removing all previous streamline configurations from the npm configurations (as advised inside the readme) i get the above error

It seems that there are multiple icons that have the same name based on the main website, and as a result I'm unable to import the correct one. For example, the following two icons are both called Bin 1 on the website

And when viewing the relevant import statement, they both show

import Bin1 from '@streamlinehq/streamlinehq/images/streamline-light/bin-1.svg'

When the package downloads all of the icons, the folder only contains a single bin-1.svg icon (no copies, or 1.1 or anything) and as such, importing the bin icon that I actually want gives me the wrong icon.

I'm not sure how many icons this is happening to, this is jus the one I've found but I'm sure there are probably more