Presslabs-particles-icons NPM

Particles

Particles is a collection of fully editable line icons — using Adobe Illustrator and FontForge Scripting.

Particles was developed by the awesome engineering team at Presslabs, a Managed WordPress Hosting provider.

For more open-source projects, check Presslabs Code.

Usage

There are two ways of using Particles — with Webpack or other bundle system, or with the good old CSS.

For a full list of particles and usage, see project demo

Webpack

First, you have to install Particles with your package manager — using one of the commands below. Webpack will automatically copy the fonts to your output folder.

yarn install presslabs-particles-icons

npm install presslabs-particles-icons

Second, import the fonts and style in your sass file.

$particles-font-path: "~presslabs-particles-icons/dist/fonts/";
@import "~presslabs-particles-icons";

Additionally, import the fonts and style where you wish to use them in your style file.

.icon {
  @import particle('add');
}

Or use them directly in HTML markup.

<i class="particle">add</i>

CSS and Fonts

You can copy the fonts to your working directory, in the fonts folder, and particles.css in your css folder. Then, import the style in the header of the HTML file:

<link rel="stylesheet" href="css/particles.css" />

Additionally, add the icons where you wish to use them in your file.

<i class="particle">add</i>

Develop Custom Fonts

To develop custom fonts, you need to install the following: FontForge and WOFF2 Compressor by Google. Next, follow the instructions below.

Start the script

./bin/start

Step by step

Generate JSON file

./bin/dump ./config.json > ./dist/icons/particles.json

Replace stroke linecap and linejoin methods (it's a bug with FontForge)

./bin/replace ./config.json stroke-linecap=\"round\" stroke-linecap=\"butt\"
./bin/replace ./config.json stroke-linejoin=\"round\" stroke-linejoin=\"miter\"

Generate font files

fontforge -script ./bin/generate ./config.json ./dist/icons/particles.json
woff2_compress ./dist/fonts/particles.ttf

Build style files and JSON data file

./bin/create_css ./config.json > ./dist/style/particles.css
./bin/create_scss ./config.json > ./dist/style/particles.scss
./bin/create_data ./dist/fonts/particles.svg > ./dist/icons/particles-data.json