@streamr/streamr-icons

Streamr's icon font

This is a web font containing the icons used on Streamr's websites.

Installation

With Webpack

1. To use the package you have to be logged in to the NPM CLI with your account. The account used must be in NPM's Streamr organization. You can log in using npm adduser [username].

2. Make sure your webpack config has proper loaders for .css, .eot, .ttf and .woff file types. The config.module.rules might look something like this:

   [
       {
           test: /\.css$/,
           loader: 'css-loader'
       },
       {
           test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
           use: 'url-loader?limit=10000&mimetype=application/font-woff'
       },
       {
           test: /\.(ttf|eot|svg|otf)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
           use: 'file-loader'
       }
   ]
   

3. Install streamr-icons with

   npm install --save @streamr/streamr-icons
   

4. Import streamr-icons css into your code with

   import '@streamr/streamr-icons/styles.css'
   

With the old-fashioned way

1. Download the repository and put it in some location in your project.
2. Import the css file into your html file with

   <link rel="stylesheet" href="path/to/streamr-icons/styles.css">
   

Usage

After installation you can add an icon to a page by simply giving a class icon-[iconName] to any html element. Example:

<span class="icon-streamr-engine"/>

A list of all icons can be seen in icons-reference.html

Reference

Streamr-Icons font is made using Fontastic.