Giter Site home page Giter Site logo

fui-icon-script's Introduction

Fomantic-UI Icon Generation Script

Generate the icons.overrides and icon.html.eco files for Fomantic-UI and Semantic-UI.

You can use this script to generate the icons for free and pro versions of FontAwesome.

Usage

First clone the repository and install the npm dependencies.

$ git clone [email protected]:fomantic/icon-script.git
$ cd icon-script
$ npm install 

Now download the latest version of FontAwesome from their website fontawesome.com (if you have a pro license you can use the pro version).

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.

fontawesome-free-x.x.x-web.zip
fontawesome-free-x.x.x-web/
node_modules/
src/
static/
templates/
index.mjs
config.json

Once the FontAwesome .zip is extracted you can now generate the icon files, simply run npm start to start the generation.

$ npm start

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.

dist/
  server/
  src/

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

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 which is a simple render engine which is used to simply add the icon variables into the template files.

fui-icon-script's People

Contributors

lubber-de avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.