# JK-ICONS: Find & Copy Playing

### Installation

```
npm install jkfe-icons
```


### Import

* Webpack

  Make sure install `url-loader`, `file-loader` to resolve iconfonts files or svg files, and install target `*-loader` to import icon stylesheets, like `stylus-loader`, `less-loader`, etc.

* LESS

  ```
  @import (css) "path/to/jkfe-icons/lib/jkfe-icons.css";
  ```

* Stylus

  ```
  @import 'path/to/jkfe-icons/lib/jkfe-icons.styl'
  ```

* Gulp

  Move the fonts with Gulp

  ```
  gulp.task('move-fonts', function () {
    gulp.src('node_modules/jkfe-icons/lib/fonts/**/*')
      .pipe(gulp.dest('path/to/fonts/'))
  })
  ```


### Usage

* Class Name

  Ensure you've import relative stylesheets, and use it within existed icons

  ```
  <span class="icon icon-{Icon Name}"></span>
  ```

* SVG Symbols

  Inline combined SVG reference into body, then drop a `<use>` element snippet

  ```
  <svg role="img">
    <use xlink:href="#{Icon Name}></use>
  </svg>
  ```

  Or directly link the external `svg-symbols` file:

  ```
  <svg role="img">
    <use xlink:href="{Url}/svg-symbols.svg#{Icon Name}"></use>
  </svg>
  ```

### Development

New version of JK-Icons required a valid `Sketch` file to generate all resources, please make sure you have rights to create more assets, or you can ask designers to distribute that.

All build process can be found in `gulpfile.babel.js` and local development is required for `webpack`.


### License
[MIT](https://opensource.org/licenses/MIT)