i8-icon

v0.9.4

Published

2 years ago

> This repo is for distribution on `npm` and `bower`. The source for this module is in the [main i8-icon repo](https://github.com/icons8/i8-icon). > Please file issues and pull requests against that repo.

Downloads

125

0High
0Medium
0Low

icons8

icons8 i8 icon icon-set svg-icon svg-set svg-sprite

Icon library by Icons8

This repo is for distribution on npm and bower. The source for this module is in the main i8-icon repo. Please file issues and pull requests against that repo.

Insert the icons in 30 seconds using the new Icon Sets technology.

Installing i8-icon

You can install this package locally either with npm, bower, or jspm.

npm

npm install i8-icon

Now you can use require('i8-icon/angular-i8-icon') or require('i8-icon/jquery-i8-icon') when installing with npm or jsmp and using Browserify or Webpack.

bower

# To get the latest stable version, use bower from the command line.
bower install i8-icon

# To get the most recent, last committed-to-master version use:
bower install i8-icon#master

# To save the bower settings for future use:
bower install i8-icon --save

# Later, you can use easily update with:
bower update

Please note that i8-icon requires AngularJS 1.1.x or higher for use as Angular module. Please note that i8-icon requires jQuery 1.8.x or higher for use as jQuery plugin.

Using the i8-icon library

Simply include the scripts and stylesheet in your main HTML file, in the order shown in the example below. Note that npm will install the files under /node_modules/i8-icon/ and bower will install them under /bower_components/i8-icon/.

Simple demo for AngularJS version

<body ng-app="app">
  <i8-icon icon="fci:checkmark"></i8-icon>
  <div i8-icon="clock"></div>
  <i8-icon data-icon="//cdn.rawgit.com/icons8/flat-color-icons/v1.0.2/svg/search.svg"></i8-icon>
  <span data-i8-icon="calendar"></span>
  <i8-icon icon="md-action:3d-rotation" alt=""></i8-icon>

  <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.js"></script>
  <script type="text/javascript" src="/bower_components/i8-icon/angular-i8-icon.js"></script>

  <script>
    angular
      .module('app', ['i8.icon'])
      .config(function($i8IconProvider) {
        $i8IconProvider
          .svgSet('flat-color-icons', '//cdn.rawgit.com/icons8/flat-color-icons/v1.0.2/icon-set/icons.svg')
          .alias('flat-color-icons', 'fci')
          .icon('clock', '//cdn.rawgit.com/icons8/flat-color-icons/v1.0.2/svg/clock.svg')
      });
  </script>
</body>

Simple demo for jQuery version

<body>
  <div i8-icon="fci:checkmark"></div>
  <span i8-icon="clock"></span>
  <div data-i8-icon="//cdn.rawgit.com/icons8/flat-color-icons/v1.0.2/svg/search.svg"></div>
  <i8-icon icon="calendar"></i8-icon>
  <span class="i8-icon i8-icon-md-action:3d-rotation" data-alt=""></span>

  <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.js"></script>
  <script type="text/javascript" src="/bower_components/i8-icon/jquery-i8-icon.js"></script>

  <script>
    $(function() {
      $(document).i8icons({
        svgSet: {
          "flat-color-icons": '//cdn.rawgit.com/icons8/flat-color-icons/v1.0.2/icon-set/icons.svg'
        },
        alias: {
          fci: "flat-color-icons"
        },
        icon: {
          clock: '//cdn.rawgit.com/icons8/flat-color-icons/v1.0.2/svg/clock.svg'
        }
      });
    });
  </script>
</body>

More demo here

Features

Available all Icons8 open source icons via our api as default source.
The icons are stored on our CDN server (which is free forever).
You insert the icons right into your code.

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme