šŸ“¦

How to use NPM Package for Streamline Icons

āš ļø

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.

[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.
    1. React https://github.com/webalys-hq/streamline-wrapper-react
    2. Angular https://github.com/webalys-hq/streamline-wrapper-angular
    3. 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.

šŸŽØ

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.

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?

Please check our special guide for instructions.

šŸšØ
Streamline NPM packages troubleshooting guide
How to setup npm token to install Streamline Icon packages