@ixiaer/icon
Responsive website icon solution. Integration svg-sprite and webfonts-generator simple Node API and CLI. Support multi-color(symbol) and single color(font) icons.
Last updated 2 months ago by kimseongrim .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install @ixiaer/icon 
SYNC missed versions from official npm registry.

JavaScript Style Guide Conventional Commits

???? Installation

To install @ixiaer/icon

npm install @ixiaer/icon

???? Getting started

Responsive website icon simple Node API and CLI solution. Support multi-color(symbol icon) and single color(font icon) icons.

  1. Register a couple of SVG source files for processing.
  2. Trigger the compilation process and receive the generated files(SVG, JS, Fonts, CSS).

???? CLI Generator

# help
$ icon --help

Usage: icon [font|symbol] [options] [arguments]
       icon -i "icons/*.svg" --css-dest styles/

Must:
  -i, --icons     $ icon -i "icons/*.svg"

Options:
  -n, --name      $ icon -n ixiaer
  -t, --template  $ icon -t template/icon-font.css

Font options:
  --font-dest  $ icon --font-dest fonts/
  --css-dest   $ icon --css-dest styles/
  --font-type  $ icon --font-type "['svg', 'ttf', 'woff', 'woff2', 'eot']"
  --css-type   $ icon --css-type "['css', 'scss', 'less', 'stylus']"

Symbol options:
  --js-dest   $ icon --js-dest scripts/

Alias: ixiaer-icon > icon

Templates

???? Node API

/**
  * Must:
  * @param {string} opt.icons - List of SVG files.
  *
  * Options:
  * @param {string} opt.name - Name of font and base name of font files.
  * @param {string} opt.template - Path of custom CSS template. Generator uses handlebars templates.
  *
  * Font options:
  * @param {string} opt.fontDest - Directory for generated font files.
  * @param {string} opt.cssDest - Path for generated CSS file.
  * @param {Array} opt.fontType - Font file types to generate. Possible values: ['svg', 'ttf', 'woff', 'woff2', 'eot'].
  * @param {Array} opt.cssType - Css file types to generate. Possible values: ['css', 'scss', 'less', 'stylus'].
  *
  * Symbol options:
  * @param {string} opt.jsDest - JavaScript output destination.
  */

const iconFont require('@ixiaer/icon/lib/icon-font.js')
const iconSymbol require('@ixiaer/icon/lib/icon-symbol.js')

iconFont({
  name: 'ixiaer',
  icons: 'icons/*.svg',
  template: 'templates/icon-font.css',
  fontDest: 'assets/fonts',
  cssDest: 'assets/styles',
  fontType: ['svg', 'ttf', 'eot', 'woff', 'woff2'],
  cssType: ['css', 'scss', 'less', 'stylus']
})

iconSymbol({
  name: 'ixiaer',
  icons: 'icons/*.svg',
  template: 'templates/icon-symbol.js',
  jsDest: 'assets/scripts'
})

Templates

???? Font Icon Usage

// Webpack
import 'assets/styles/ixiaer.css'
<!-- CDN -->
<link href="assets/styles/ixiaer.css" rel="stylesheet" type="text/css" />
<!-- Use icons -->
<i class="ixiaer-foo"></i>
<i class="ixiaer-bar"></i>


Click try it!

???? Symbol Icon Usage

// Webpack
import 'assets/scripts/ixiaer.js'
<!-- Or Browser -->
<script type="text/javascript" src="assets/scripts/ixiaer.js"></script>
<!-- Use icons -->
<svg class="ixiaer" aria-hidden="true">
  <use xlink:href="#ixiaer-foo" />
</svg>
<svg class="ixiaer" aria-hidden="true">
  <use xlink:href="#ixiaer-bar" />
</svg>


Click try it!

???? Compatibility

Font Icon: Support for IE8+, and modern browsers
Symbol Icon: Support for IE9+, and modern browsers

If you like this project, please reward a star. Thank you ????

Current Tags

  • 1.1.4                                ...           latest (2 months ago)

10 Versions

  • 1.1.4                                ...           2 months ago
  • 1.1.3                                ...           a year ago
  • 1.1.2                                ...           a year ago
  • 1.1.1                                ...           a year ago
  • 1.1.0                                ...           a year ago
  • 1.0.4                                ...           a year ago
  • 1.0.3                                ...           a year ago
  • 1.0.2                                ...           a year ago
  • 1.0.1                                ...           a year ago
  • 1.0.0                                ...           a year ago
Maintainers (1)
Downloads
Today 0
This Week 0
This Month 0
Last Day 0
Last Week 10
Last Month 10
Dependencies (5)
Dependents (0)
None

Copyright 2014 - 2016 © taobao.org |