Streamline NPM package is deprecated and will be deleted completely on 1st November 2022, read the full story here.
Unfortunately the Streamline NPM package architecture is brittle and over-engineered. Please download the images directly from our website and insert them into your project as files which will always be reliable. Streamline team is focused on ensuring that our web application provides the best user experience for developers' use cases.
This is a small library which downloads Streamline assets you have access to into your local folder so that they can be used in your Javascript project. This is the only package you need to use Streamline assets, so please uninstall any old Streamline wrapper or private packages if you had them.
It works with any framework. You just need NPM and a build system like Webpack which will handle .svg
files.
Check an example app in the docs/latest
folder.
.env
file with STREAMLINE_FAMILIES
and STREAMLINE_SECRET
variables. Check .env.example
file in docs/latest/example-app
for an example.
STREAMLINE_FAMILIES
: an array of strings with names of Streamline icons or illustrations families you own and which you want to include in your project. You can take the name from its url in Streamline. Eg a name of Brooklyn Illustrations from page https://app.streamlinehq.com/illustrations-brooklyn is illustrations-brooklyn
.STREAMLINE_SECRET
: your private npm token which is taken from Streamline developer page. Don't share this with anybody and keep it out of any public repos.npm install @streamlinehq/streamlinehq
. It will execute the postinstall
script which will fetch the graphical assets. The requested images in a form of SVG files will be put in the package's img
folder. svg
files as images and render them. It depends on your tech stack. For instance, in create-react-app this feature is enabled by default.
After this you will be able to import Streamline images as usual in your project, eg:
import SatelliteSignal from '@streamlinehq/streamlinehq/img/streamline-regular/interface-essential/share/satellite-signal.svg'
Check docs/latest/example-app
project for more examples.
Another option is to use an IDE which suggests you to autocomplete a path to an image.
Streamline images are just .svg
files and the way to alter them depends on your build system. As a rule of thumb you should either render them as images and change the CSS styles of the <img>
tag, either inline render them as a component and change styles by passing stroke
/fill
attributes. Check docs/latest/example-app
project for more examples.
You can also change the color and size in Streamline app itself, download it as SVG and save it in your app as a static file.
.env
file, what do I do?This is a rare case. Set STREAMLINE_RELATIVE_PROJECT_FOLDER_PATH
in your terminal session which will run the installation script to a path which will be appended to the npm package's path to locate the parent's project folder path from an npm package. This might sound confusing, check install.ts
file, line 13 to understand how it's used.
.env
file, which options do I have?You can set STREAMLINE_FAMILIES
and STREAMLINE_SECRET
variables in your shell so that the script can take them from process.env
.
In 80% of the cases you need to ensure that you have set up your env vars properly in your project and reinstall this package by removing it completely and then installing it again, eg with rm -rf node_modules && npm i
.
Ensure that you have an active subscription for the Streamline family you want to download images from. Eg an error "You can not download XXX family in SVG" means that you don't have an active license for a XXX family. Please contact the Streamline team on support@webalys.com if you have purchased the valid license, and it still doesn't let you download the family's images.
Before installing this package you need to have any previous Streamline configuration removed. If you had private Streamline packages installed you have most likely configured your npm/yarn to pass an npm token to Cloudsmith. This configuration isn't needed anymore, and it can prevent this package from being installed. Remove (or temporarily rename) your .npmrc
file in your project and remove any Streamline configuration lines you might have added to yarn/npm config.
Make sure that you're using the package's latest version.
Note that because of fetching images installation might take longer than usual.
Before opening an issue double check that images have been installed in your node_modules/@streamlinehq/streamlinehq/img
folder. If not - try reinstalling on a better internet connection or checking the error message.
Before opening an issue ensure that your project can build and render any other .svg
files.
Please check the issues list: maybe it has an answer for you. If there is none please open a new issue and describe the problem, we will respond shortly.