JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 59
  • Score
    100M100P100Q90642F
  • License MIT

Icons for Mosaic

Package Exports

    This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@ptsecurity/mosaic-icons) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

    Readme

    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

    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.

    Building

    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.

    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. First time you will be asked to enter figma access token, you can create it in the Figma profile. (Sometimes due to some issues with network access to Amazon S3 some external VPN coudld be helpful)
    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.
    5. Check glyph code with opentype.js (https://opentype.js.org/glyph-inspector.html). Correct: No symbols with codes F7хх.
    6. Add changes to CHANGELOG.md.
    7. Change version in package.json.
    8. Change version in Gruntfile.js.
    9. Commit svg files, package.json, Gruntfile.js and CHANGELOG.md. Commit message: Bumped version number to %version%. CI will build and publish to npm repository new package version.

    You are free to drink a cup of coffee.