Introduction

Ease-Icon is a icon lib producer, which means you can generate icon libs easily and deploy those libs in your personal or public npm registry.

Ease-Icon support three types of icon schema：

1. iconfont
2. SVG Sprites
3. Vue lib

Install

Install command-line tool first.

npm install ease-icon-cli -g

Usage 1: As an icon producer for your project

(1) Create your own source folder to maintain source svg files.And copy svg files in it.

mkdir ./source

(2) Run build command

# defualt to build vue lib
eicon pack ./source ./dist

# you can build iconfong with '--font'
eicon pack ./source ./dist --font

# watch mode with '-w'
eicon pack ./souce ./dist -w

Usage 2: As an icon lib repo

Setup

After installed cli tool, init a new icon project.

eicon init demo-icon

After initiation, install dependecies.

cd demo-icon && npm install

Usage

(1) add new folder in source folder.

mkdir source/Common

Notice: we recommand to use word with CamelCase as new folder name.

(2) Copy your svg icons which have exported from tools like Skecth、figma and so on，to the new folder you created.

example:

cp ~/CloseDoor.svg ./source/Common/CloseDoor.svg

Notice: we recommand to use word with CamelCase as svg filename

(3) Build lib

Build iconfont or SVG sprites

eicon build Common -t iconfont

Build vue lib

eicon build Common

If you don't pass the folder name you just created, eicon will build all folders under source folder.

(4) Run a service to check demo

Config your lib in demo/src/source_config.js

export default {
  Common: { title: 'Common Icons' },
};

Then serve it:

npm run serve

(5) Publish you lib(s)

Notice: before publish package, login to the npm registry first with npm login

eicon publish Common

(6) Install and use it in your project

For example in Vue:

import Vue from 'vue';
import Icons from '@ease-icon/vue-common';

Vue.use(Icons);

// ... other code

FAQ

How to publish in local registry?

1. Just add .npmrc file and add your registry url into it.
2. Use --registry option to specify which registry you wanna use.