Table of Contents
NPM package for Streamline icons and illustrations
It works with any model. You just need NPM and a build organization like Webpack which will handle
.svg files .
Check an exemplar app in the
docs/latest booklet .
Wrapper packages for React, Angular and Vue are deprecated and will be removed after August 1st 2021. Please use this new package rather, which merely serves svg files for your app. Users are expected to use their own svg loader for whatever construct system they use in their app ; read more below.
How to use
- Ensure that you have an active Streamline subscription.
- Fill your project’s private
docs/latest/example-appfor 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
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.
- Install the package in your project
npm install @streamlinehq/streamlinehq. It will execute the
postinstallscript which will fetch the graphical assets. The requested images in a form of SVG files will be put in the package’s
- Configure your project so that it can import any
svgfiles 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:
spell SatelliteSignal from ' @ streamlinehq/streamlinehq/img/streamline-regular/interface-essential/share/satellite-signal.svg '
docs/latest/example-app project for more examples .
How to find a path to a Streamline image
- Go to Streamline website
- Select a family you’re interested in
- Select an icon you’re interested in and see the import path in the sidebar.
Another option is to use an IDE which suggests you to autocomplete a path to an double .
How to change style, size, etc
streamline images are barely
.svg files and the means to alter them depends on your build organization. As a rule of hitchhike you should either render them as images and change the CSS styles of the
tag, either inline supply them as a component and transfer styles by passing
fill attributes. Check
docs/latest/example-app project for more examples. You can besides change the tinge and size in Streamline app itself, download it as SVG and save it in your app as a inactive file .
I need to set custom path to my
.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 initiation handwriting to a path which will be appended to the npm box ‘s way to locate the parent ‘s project folder path from an npm package. This might sound confusing, check
install.ts file, credit line 13 to understand how it ‘s used.
I cannot use
.env file, which options do I have?
You can set
STREAMLINE_SECRET variables in your blast thus that the handwriting can take them from
In 80 % of the cases you need to ensure that you have set up your env vars by rights in your project and reinstall this software by removing it wholly and then installing it again, eg with
rm -rf node_modules && npm i .
guarantee that you have an active voice subscription for the Streamline syndicate you want to download images from. Eg an error “ You can not download XXX class in SVG ” means that you do n’t have an active license for a XXX syndicate. Please contact the Streamline team on support @ webalys.com if you have purchased the valid license, and it hush does n’t let you download the family ‘s images .
Before installing this software you need to have any previous Streamline configuration removed. If you had private Streamline packages installed you have most probable configured your npm/yarn to pass an npm token to Cloudsmith. This shape is n’t needed anymore, and it can prevent this box 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 translation .
bill that because of fetching images facility might take longer than common .
Before opening an issue double over check that images have been installed in your
node_modules/@streamlinehq/streamlinehq/img folder. If not – test reinstalling on a better internet connection or checking the error message .
Before opening an offspring ensure that your visualize can build and render any other
Please check the issues tilt : possibly it has an answer for you. If there is none please open a newfangled issue and describe the problem, we will respond concisely .
How to dev
Click to expand
Pull requests and any suggestions are welcome !
- Fork a project, clone it (as of now it will not fetch the images as there is no
.envfile in the parent folder, feel free to ignore the error). Work on new features or fixes in a separate branch.
npm run devto compile a project on any code change.
- Use an example app in
docs/latest/example-appfolder to experiment with this package. Alter it, so it uses a local version of the
@stremlinehq/streamlinehqpackage. Read its README for more instructions.
- Once done, open a pull request against
masterand wait for a review.
How to publish on npm
Click to expand
once you have made the changes, do the pursuit :
- Increment a version in
npm run buildto create a new build
npm publish --access public
- Change the example app code in the next pull request to use the latest version of this package. Increment its version too.