Giter Site home page Giter Site logo

gimjin / icon Goto Github PK

View Code? Open in Web Editor NEW
3.0 1.0 0.0 623 KB

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

License: MIT License

JavaScript 92.29% CSS 7.71%
cli icon generator svg ttf eot woff woff2 font sprite

icon's Introduction

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 ๐Ÿ™

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.