Skip to content

positive-js/mosaic-icons

Repository files navigation

npm version Build Status Dependency Status GitHub license

Mosaic Icons

Installation in frontend code

Note that Mosaic Icons is optional package and it should be installed manually.

NPM

npm install @ptsecurity/mosaic-icons --save

Yarn

yarn add @ptsecurity/mosaic-icons

Then you should add icons styles:

@import "~@ptsecurity/mosaic-icons/dist/styles/mc-icons.css";

And finally import McIconModule to your component module.

import { McIconModule } from '@ptsecurity/mosaic';

@NgModule({
    imports: [
        McIconModule,
        ...
    ],
})
export class AppModule {}

If mc-icons.css does't suit your project, you can also add:

  • mc-icons.less;
  • mc-icons-embed.css with embedded font included.

Variants

There are two icon usage variants:

  1. <i mc-icon="mc-gear_16"></i>;

    In this case you can provide [color] attribute. It can have following values: primary, second, error.

  2. Simply <i class="mc mc-gear_16"></i>.

Icons pack version building and publishing (macOS)

Install some required software

  1. Install brew (http://brew.sh/index_ru.html): /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)

  2. Install font tools with brew: brew install ttfautohint fontforge --with-python. If fails try this one: brew install ttfautohint fontforge

  3. Install node.js. Download stable LTS version from here: https://nodejs.org/en/.

  4. Install grunt sudo npm install -g grunt-cli You'll be asked for the password, it's your local macOS password.

  5. Copy icons-config.json.template to icons-config.json and add token to file (do not commit it).

Building

Run commands: npm install grunt

Publish version to npm repository

  1. Open figma file figma.com/file/oQC47kSeukdqLMNh4IUhke/Mosaic-icons, craft icon. Make icon ready for iconpack: flatten, outline, name by convention.
  2. Build pack: grunt.
  3. Add new icon names to Gruntfile.js into codepoints section. Add synonyms to tags. Attention: all codes are hex: 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F, 10.
  4. Check icons rendering in html preview. New icons must be correct both in webfont and svg sprite previews. Check glyph code with opentype.js (https://opentype.js.org/glyph-inspector.html). Correct: No symbols with codes F7хх.
  5. Commint svg icons and Gruntfile.js. Commit message: What changes were made.
  6. Add changes to CHANGELOG.md.
  7. Change version in package.json.
  8. Change version in Gruntfile.js.
  9. Commit package.json, Gruntfile.js and CHANGELOG.md. Commit message: Bumped version number to %version%.
  10. Add tag with %version% and push it. It will trigger build and publish to global npm.

You are free to drink a cup of coffee.