ember-heroicons

[!NOTE] This is a temporary fork of the official ember-heroicons package. This fork contains a bug fix for Windows and will probably not be permanently maintained. Once the bug fix is merged into the main project this fork will be abandoned.

The original repo can be found here: https://github.com/tzellman/ember-heroicons

The Windows bug fix PR is here: https://github.com/tzellman/ember-heroicons/pull/11

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

Installation

ember install @jagthedrummer/ember-heroicons

Demo

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;
};

Compatibility

• Ember.js v4.8 or above
• Ember CLI v4.8 or above
• Node.js v18 or above

Contributing

See the Contributing guide for details.

License

This project is licensed under the MIT License.