Skip to content

Commit

Permalink
chore(*): v1 cli release
Browse files Browse the repository at this point in the history
  • Loading branch information
Sean Hamilton committed May 4, 2019
1 parent b93279a commit ee2cc9c
Show file tree
Hide file tree
Showing 57 changed files with 10,654 additions and 5,146 deletions.
8 changes: 8 additions & 0 deletions .eslintrc
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
{
"extends": [
"airbnb-typescript/base"
],
"env": {
"node": true
}
}
3 changes: 1 addition & 2 deletions .gitignore
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
# Project
node_modules/
dist/
fontawesome*
fui-icons

# OS or Editor folders
.DS_Store
Expand Down
94 changes: 67 additions & 27 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,49 +1,89 @@
# [Fomantic-UI](https://github.com/fomantic/Fomantic-UI) Icon Generation Script
# [Fomantic-UI](https://github.com/fomantic/Fomantic-UI) Icon CLI Tool

Generate the `icons.overrides` and `icon.html.eco` files for Fomantic-UI and Semantic-UI.
Generate the `icon.overrides` and `icon.html.eco` files for Fomantic-UI (or Semantic-UI).

You can use this script to generate the icons for free and pro versions of [FontAwesome](https://fontawesome.com).

## Requirements
- [nodejs](https://nodejs.org)
- [npm](https://npmjs.com)
- or [yarn](https://yarnpkg.com)

## Usage

First clone the repository and install the npm dependencies.
#### npm
```console
$ git clone [email protected]:fomantic/icon-script.git
$ cd icon-script
$ npm install
$ npx create-fomantic-icons
```

Now download the latest version of FontAwesome from their website [fontawesome.com](https://fontawesome.com) (if you have a pro license you can use the pro version).
#### yarn
```console
$ yarn create fomantic-icons
```

Once downloaded you will be prompt with a few questions which will allow you to generate the specific icon set you want.

Once you have downloaded the latest `.zip` file extract it to the root directory of the repository. You should end up with a structure similar to the following.
```text
fontawesome-free-x.x.x-web.zip
fontawesome-free-x.x.x-web/
node_modules/
src/
static/
templates/
index.mjs
config.json
Select which FontAweome icon set you want
```console
Which icons set would you like to generate?
> FontAwesome Free
FontAwesome Pro
```
> NOTE: You need a license to generate the icons from FontAweome Pro
Once the FontAwesome `.zip` is extracted you can now generate the icon files, simply run `npm start` to start the generation.

Next select which version you want to use
```console
$ npm start
Which version of FontAwesome Free should we download?
> 5.8.1
5.8.0
5.7.2
5.7.1
5.7.0
```

Once the script has finished running you will see a new directory called `dist/` was created. This is where the `icon.overrides` and `icon.html.eco` files are created. These files are created in a directory structure the same as their main repositories, this can help transport them to the correct place.

```text
dist/
server/
src/
Now you need to specify where to save your icons
```console
Where would you like the dist saved? [C:\Users\Username\Documents\fui-icons]
```
> NOTE: The default location is `{pwd}/fui-icons`. When you specify your own location it is relative from your current pwd.
> For example if I enter `new-icons` my icons will be placed in `C:\Users\Username\Documents\new-icons`.
The `dist/server/` directory contains the `icon.html.eco` file used for the docs page. The `dist/src/` directory is the Fomantic-UI src code file. There is also another file created inside `dist/` called `icon-map.json` this is a simple JSON file containing a map of all the icons generated from the metadata. The font files are also inside `dist/src/` ready to drop into the FUI src with the correct names.

## Customization
Once you have answered all the prompts the icon set you picked will be downloaded from GitHub and will be parsed.
Once it is downloaded and parsed it will build the required files for the a FUI (or SUI) theme and the docs page in the location
you specified.
```console
i asset doesn't exist locally, starting download
√ downloaded (fontawesome-free-5.8.1-web.zip)
√ asset saved (C:\Users\Username\AppData\Local\Temp\fui-icon-script\fontawesome-free-5.8.1-web.zip)
√ asset extracted (C:\Users\Username\AppData\Local\Temp\fui-icon-script\fontawesome-free-5.8.1-web)
√ icons & categories parsed

Results:
Solid: 936
Outline: 151
Thin: 0
Brand: 426
1513

√ build all dist files
Files saved to C:\Users\Username\Documents\new-icons
```
> NOTE: If the script detects you have already downloaded the icon set it will skip the download and use the local files.
To customize the script you can modify the files inside `templates/`, `static/` and the `config.json` file. These files can help you create custom output. The templates use [Crather](https://github.com/HamiStudios/crather) which is a simple render engine which is used to simply add the icon variables into the template files.
## Remove downloaded files

If you want to delete the downloaded files its really simple.

#### npm
```console
$ npx create-fomantic-icons --clean
```

#### yarn

```console
$ yarn create fomantic-icons --clean
```
3 changes: 3 additions & 0 deletions bin/run
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
#!/usr/bin/env node

require('../lib/index.js').default();
3 changes: 3 additions & 0 deletions bin/run.cmd
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
@echo off

node "%~dp0\run" %*
19 changes: 0 additions & 19 deletions config.json

This file was deleted.

Loading

0 comments on commit ee2cc9c

Please sign in to comment.