Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/upplication/icons
Collection of icons used by Upplication in our dashboard and/or landing page.
https://github.com/upplication/icons
Last synced: about 8 hours ago
JSON representation
Collection of icons used by Upplication in our dashboard and/or landing page.
- Host: GitHub
- URL: https://github.com/upplication/icons
- Owner: Upplication
- License: mit
- Created: 2016-03-17T10:40:28.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2022-12-08T00:35:35.000Z (almost 2 years ago)
- Last Synced: 2024-04-14T23:08:42.069Z (7 months ago)
- Language: JavaScript
- Size: 1.26 MB
- Stars: 1
- Watchers: 6
- Forks: 0
- Open Issues: 11
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Upplication Icons
This is the collection of icons used by Upplication in our dashboard and/or landing page for Upplication and Wingu products.
Live demo available for Upplication icons: http://upplication.github.io/icons/upplication
and for Wingu: http://upplication.github.io/icons/wingu
## Usage
### Bower
```
$ bower install Upplication/icons
```
### Raw
```html
```
## Gulp tasks
### default
```
gulp
```
Runs webfont, demogen, demo tasks.
### version
```
gulp version
```
Runs webfont, demogen and gitwork tasks.
### webfont
```
gulp webfont
```
Takes all the icons available at `lib/icons`, checks them for correct size, generate the base64 version
of a woff font that includes all of them and spit out the `dist/upplication-icons.css` file ready to use.
### demogen
**DO NOT RUN THIS TASK BY ITSELF**
```
gulp demogen
```
Given the available glyphs, generate `index.html` for Upplication and Wingu, containing all of the available icons.
### demo
**DO NOT RUN THIS TASK BY ITSELF**
```
gulp demo
```
Opens the `index.html` files in the OS default browser
### gitwork
```
gulp gitwork
```
If new svg icons or updated ones are available at `lib/icons`:
* Generate a commit mesage containing the list of new/updated icons
* Adds `lib/icons/*.svg` `dist/*` to commit
* Commit
## Contributing
### Icons
There is a really easy way to contribute with icons to this project
* Clone the project
* Run `npm install`
* Add the new icons to `lib/icons` directory. Don't worry if you see icons with names like `uEA01-align-center.svg`.
It's normal and *automatic*. Add as many icons as you want with the name you want to give the glype. For example,
you would create a file named `align-center.svg` but later the script would rename it to `uEA01-align-center.svg`.
* Run `gulp` as much as you need. This will generate the font and css files and open a live local demo with them.
* When you are done, run `npm version patch`
* Run `git push --follow-tags`
* Done! :)
```
$ npm install
$ gulp
```
### Code
As usual :)
## How it works
Given a collecion of svg icons (located at `src/icons`), this repo has a set of scripts that
allows us to:
* Generate a webfont (woff) containing all those icons.
* Generate a CSS file that embeds the woff webfont in base64 format.
* Add each icon to the CSS file with its own class (based on the svg filename) and a common one.
* Generate a html demo page with all the available icons.
* Generate a JSON map of every icon name and their unicode