Note that Mosaic Icons is optional package and it should be installed manually.
npm install @ptsecurity/mosaic-icons --save
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.
There are two icon usage variants:
-
<i mc-icon="mc-gear_16"></i>
;In this case you can provide
[color]
attribute. It can have following values: primary, second, error. -
Simply
<i class="mc mc-gear_16"></i>
.
-
Install brew (http://brew.sh/index_ru.html):
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)
-
Install font tools with brew:
brew install ttfautohint fontforge --with-python
. If fails try this one:brew install ttfautohint fontforge
-
Install node.js. Download stable LTS version from here: https://nodejs.org/en/.
-
Install grunt
sudo npm install -g grunt-cli
You'll be asked for the password, it's your local macOS password. -
Copy icons-config.json.template to icons-config.json and add token to file (do not commit it).
Run commands:
npm install
grunt
- Open figma file figma.com/file/oQC47kSeukdqLMNh4IUhke/Mosaic-icons, craft icon. Make icon ready for iconpack: flatten, outline, name by convention.
- Build pack:
grunt
. - 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.
- 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хх.
- Commint svg icons and Gruntfile.js. Commit message: What changes were made.
- Add changes to CHANGELOG.md.
- Change version in package.json.
- Change version in Gruntfile.js.
- Commit package.json, Gruntfile.js and CHANGELOG.md. Commit message: Bumped version number to %version%.
- 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.