@ixiaer/icon NPM

📦 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.

Register a couple of SVG source files for processing.
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
icon-font.css
icon-symbol.js

🧩 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
icon-font.css
icon-symbol.js

💛 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>