<aside> ⚠️ **This documentation is about our old NPM packages. They are now deprecated and will be removed on June 01, 2021.

→ Upgrade to the new 'Universal' NPM package instead. Benefits of upgrading: 🌤 Lightweight: prevent your project from bloating with unneeded files. 🏯 Predictable: decrease the number of bugs and simplify the package setup. 👩‍💻 Transparency: view the package's source in Github. 😱** Avoid interruption when we turn off the old packages on June 01, 2021.

</aside>

[Deprecated] Wrapper/asset packages

⚠️ Wrapper packages for React, Angular and Vue are deprecated. They will be removed on June 1st 2021. Please use our new package streamlinehq instead, it provides a much better user experience.

If you still wish to use the old packages, read on.

Getting started

1. Purchase a Streamline Family (like Streamline Regular)
2. Follow this tutorial How to setup npm token to install Streamline Icon packages to configure NPM token in your javascript token.
3. Install the Wrapper package for the framework of your choice. Check the README file in the corresponding Wrapper package repository and follow the steps listed there.
   • React https://github.com/webalys-hq/streamline-wrapper-react
   • Angular https://github.com/webalys-hq/streamline-wrapper-angular
   • Vue https://github.com/webalys-hq/streamline-wrapper-vue
4. Install the Icon package (like @streamlinehq/streamline-regular) and render it with a Wrapper package by following a Wrapper package's Readme.

Understand

Some of icon families from Streamline can be added via NPM packages to your website.

Streamline packages exist in a form of Wrapper packages and Icon packages.

• Icon packages contain all icons for a certain Streamline family. Each Icon package contains icons from a single family only. These packages are private: they're available only for paid customers. They don't contain any logic and consist only of image-related data.
  • React https://github.com/webalys-hq/streamline-wrapper-react
  • Angular https://github.com/webalys-hq/streamline-wrapper-angular
  • Vue https://github.com/webalys-hq/streamline-wrapper-vue
• Wrapper packages act as bridges between icon packages and frontend frameworks: they render the icons from icon packages. Currently we support React, Angular and Vue frameworks. Wrapper packages are open source and free: anybody can use and improve them.

<aside> 🎨 Basically to render an icon from Streamline you need to render a Wrapper package in your frontend code and pass an icon from an Icon package into it. Yes, two packages.

</aside>

Families currently available as Icon packages

• Streamline
  • @streamlinehq/streamline-light
  • @streamlinehq/streamline-regular
  • @streamlinehq/streamline-bold
• Streamline Mini
  • @streamlinehq/streamline-mini-line
  • @streamlinehq/streamline-mini-bold
• Streamline Micro
  • @streamlinehq/streamline-micro-bold
  • @streamlinehq/streamline-micro-line

Having issues?