Ember-heroicons NPM

ember-heroicons

This addon provides access to the heroicons SVG icons within your Ember applications.

Installation

ember install ember-heroicons

Demo

Usage

The basic usage:

<HeroIcon @icon="check-circle" />

The HeroIcon component supports the following arguments:

@icon - the name of the icon to render
@type - one of outline, solid, mini or micro

Custom configuration

By default, all icons for all types will be available within your application. Additionally, the default icon type, if not specified, will be outline.

If you know you will only be using a subset of icons, then you can reduce the size of your app by customizing the configuration.

You can customize defaults and available icons by adding a ember-heroicons configuration object to your application's ember-cli-build.js and environment.js files. As an example:

// ember-cli-build.js
module.exports = function (defaults) {
    let app = new EmberApp(defaults, {
        // instruct ember-heroicons to include/omit specific icons/sets
        "ember-heroicons": {
            // default type to use if not specified to the HeroIcon component
            defaultType: "outline",
            // omit matching icons (array of string or RegExp)
            omit: [/chevron/, "camera"],
            // include only certain matching icons (array of string or RegExp)
            include: [/.*/],
            // include only certain types (outline, solid, mini, micro)
            types: ["outline"],
        },
    });
    return app.toTree();
};

// environment.js
module.exports = function (environment) {
    let ENV = {
        // at runtime, if no type is given, you can specify which type to use
        "ember-heroicons": {
            // default type to use if not specified to the HeroIcon component
            // this takes precedence over the value provided in ember-cli-build.js
            defaultType: "mini",
        },
    };
    // ...
    return ENV;
};