Yummy-icons NPM

Yummy Icons

A npm package with the Yummy Icon.

npm

Installation

1. Add the library to your project

npm i yummy-icons
yarn add yummy-icons

2. Reference the fonts on the HTML's head

<head>
  <link href="path/to/dist/yummy-icons.css" rel="stylesheet">
</head>

Usage

<i class="yummy-icon yi-001"></i>

Cheat Sheet

For details and embeddings codes, click here.

Configuration

The following variables are allowed to be set externally:

Variable	Description	Default value
$yummy-icon-selector	Defines main icon selector	yummy-icon
$yummy-icon-slug	Defines the icon selector	yi
$yummy-icon-font-path	Defines the fonts' path	web-fonts

Sass configuration (Angular)

On your /src/app/app.scss file, add:

$yummy-icon-font-path: '~yummy-icons/dist/web-fonts' !default;
@import '~yummy-icons/src/sass/yummy-icons';

Ionic 3 configuration

1. Add to config/sass.config.js:

  ...
    /**
    * includePaths: Used by node-sass for additional
    * paths to search for sass imports by just name.
    */
    includePaths: [
      'node_modules/ionic-angular/themes',
      'node_modules/ionicons/dist/scss',
      'node_modules/ionic-angular/fonts',
      'node_modules/yummy-icons/src/sass' //add this line..
    ],
  ...

2. Add to config/copy.config.js:

  ...
    copyFonts: {
      src: [
        '{{ROOT}}/node_modules/ionicons/dist/fonts/**/*',
        '{{ROOT}}/node_modules/ionic-angular/fonts/**/*',
        '{{ROOT}}/node_modules/yummy-icons/dist/web-fonts/**/*' //and this!
      ],
      dest: '{{WWW}}/assets/fonts',
    },
  ...