https://github.com/arronKler/ease-icon

An easy to use svg icon solution.
https://github.com/arronKler/ease-icon

Last synced: about 2 months ago
JSON representation

An easy to use svg icon solution.

• Host: GitHub
• URL: https://github.com/arronKler/ease-icon
• Owner: arronKler
• Created: 2021-01-06T12:25:53.000Z (over 3 years ago)
• Default Branch: main
• Last Pushed: 2021-02-24T09:02:30.000Z (over 3 years ago)
• Last Synced: 2024-07-05T00:44:26.536Z (3 months ago)
• Language: TypeScript
• Size: 956 KB
• Stars: 5
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

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

```bash

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.

```bash

mkdir ./source

```

(2) Run build command

```bash

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

```bash

eicon init demo-icon

```

After initiation, install dependecies.

```bash

cd demo-icon && npm install

```

## Usage

(1) add new folder in source folder.

```bash

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:

```bash

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

```bash

eicon build Common -t iconfont

```

Build vue lib

```bash

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

```javascript

export default {

  Common: { title: 'Common Icons' },

};

```

Then serve it:

```bash

npm run serve

```

(5) Publish you lib(s)

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

```bash

eicon publish Common

```

(6) Install and use it in your project

For example in Vue:

```javascript

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.