ease-icon-cli v1.2.2
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:
- iconfont
- SVG Sprites
- Vue lib
Install
Install command-line tool first.
npm install ease-icon-cli -gUsage 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 -wUsage 2: As an icon lib repo
Setup
After installed cli tool, init a new icon project.
eicon init demo-iconAfter initiation, install dependecies.
cd demo-icon && npm installUsage
(1) add new folder in source folder.
mkdir source/CommonNotice: 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.svgNotice: we recommand to use word with CamelCase as svg filename
(3) Build lib
Build iconfont or SVG sprites
eicon build Common -t iconfontBuild vue lib
eicon build CommonIf 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-basic';
Vue.use(Icons);
// ... other codeFAQ
How to publish in local registry?
- Just add
.npmrcfile and add your registry url into it. - Use
--registryoption to specify which registry you wanna use.