jk-icons

0.2.0 • Public • Published

JK-ICONS: Find & Copy Playing

Installation

npm install jk-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/jk-icons/lib/jk-icons.css";
    
  • Stylus

    @import 'path/to/jk-icons/lib/jk-icons.styl'
    
  • Gulp

    Move the fonts with Gulp

    gulp.task('move-fonts', function () {
      gulp.src('node_modules/jk-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

Readme

Keywords

none

Package Sidebar

Install

npm i jk-icons

Weekly Downloads

6

Version

0.2.0

License

MIT

Last publish

Collaborators

  • sunebear